JMiur [E]

Craftyslide es un pequeño plugin para jQuery que nos permite crear galerías de imágenes con mucha sencillez ya que basta agregarlas en una lista y llamar a la función, sin importar su tamaño original.

Para utilizarlo, basta descargar el ZIP que contiene el ejemplo básico, tener jQuery en nuestra plantilla y agregar el plugin y el CSS antes de </head> ya sea copiando y pegando directamente el código o utilizando archivos externos:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<link rel='stylesheet' href='URL_craftyslide.css' />

<script src='URL_craftyslide.min'></script>
El CSS sólo requiere que cambiemos una línea que es la que contiene la imagen que se utiliza para paginar la galería, subiendo esa imagen a cualquier servidor y colocando la nueva URL en esta regla de estilo:
#pagination li a {
  .......
  background: transparent url(URL_pagination.png) repeat 0 0;
}
Obviamente, cualquier otra parte del CSS puede ser personalizada, y en este ejemplo, he hecho eso con la paginación de tal modo que pueda verse correctamente, sin importar la cantidad de imágenes que tenga la galería.

#slideshow { /* es el DIV que contiene la galería */
  border: 15px solid #FFF;
  box-shadow: 0 3px 5px #999;
  margin: 0;
  padding: 0;
  position: relative;
}
#slideshow ul { /* la lista que contendrá las imágenes */
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: relative;
}
#slideshow ul li { /* cada item de la lista */
  left:0;
  list-style-type:none;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
}
#pagination { /* la paginación inferior optativa */
  clear: both;
  margin: 25px auto 0;
  padding: 0;
  text-align: center;
}
#pagination li { /* cada item de la paginación */
  display: inline;
  list-style-type: none;
  margin: 0 2px;
}
#pagination li a { /* cada imagen de la paginación es un enlace */
  background: transparent url(URL_pagination.png) repeat 0 0;
  display: inline-block;
  height: 10px;
  text-indent: -10000px;
  width: 10px;
}
#pagination li a.active { /* la imagen cambia cuando se activa */
  background-position:0 10px;
}
.caption { /* el texto optativo que se coloca en el atributo title */
  background: rgba(0,0,0,0.6);
  border-top: 1px solid #000;
  color: #FFF;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: lighter;
  left: 0;
  margin: 0;
  padding: 10px;
  position: absolute;
  width: 100%;
  z-index: 1;
}

Lo utilizamos colocando la lista allí donde se nos ocurra mostrar la galería:
<div id="slideshow">
  <ul>
    <li><img src="URL_IMAGEN_1" title="text imagen 1" /></li>
    <li><img src="URL_IMAGEN_1" title="text imagen 1" /></li>
    <!-- y seguimos agregando tantas etiquetas LI como querra,os -->
  </ul>
</div>
Y al final, llamamos a la función de este modo:
<script> $("#slideshow").craftyslide(); </script>
o establecemos parámetros:
<script>
 $("#slideshow").craftyslide({
    'width': 550,
    'height': 350,
    'pagination': true,
    'fadetime': 500,
    'delay': 2500
  });
</script>
donde:
width y height serán el tamaño total (por defecto 640x400)
pagination puede ser false en cuyo caso, funcionará como un slideshow
fadetime es el tiempo de demora entre dos imágenes
delay es el tiempo del slideshow si elegimos esa opción

26 comentarios:

Mica  

no entendi bien como poner el 1º codigo que nos das lo puse en css en la parte de peronalizar la plantilla de blogger

Responder
JMiur  

Si es el CSS si, puede ir ahí o en cualquier parte antes de </head> entre etiquetas <style> y </style>

Responder
eloy martinez  

Hola hay alguna manera de poner le un codigo par aque tenga tiempo y se pase autmoaticamente ?
ESPERO TU RESPUESTA UN SALUDO

Responder
JMiur  

Sí. Es lo que dice el post:

pagination puede ser false en cuyo caso, funcionará como un slideshow
...
delay es el tiempo del slideshow si elegimos esa opción

Responder
EpideMia  

jMiur, no logro hacer que funcione el slidechow, ya que cuando dejo el rango false en pagination, sólo aparece la primer imagen, luego desaparece y ya no aparece más nada. Ademas de que con esa opción no me muestra la paginacion.


hay alguna solucion a eso??


muchas gracias!!

Responder
JMiur  

El script no tiene ambas opciones, si 'pagination': true se muestra la paginacion y si es false genera un slideshow automático. Por l oque leí, no hay términos medios.

Responder
José  

JMiur, instalé el slide y no puedo resolver un par de problemitas:

Cuando cambio de imagen el título de cada imagen "se achica" y desaparece casi por completo, vuelve solamente si re-cargo la página. Junto con este título se mueve también el título del slide-show que tengo ubicado arriba (ImageFlow), y se comporta de la misma manera.

Tampoco puedo terminar de centrar la foto: me queda un borde gris arriba y otro a la izquierda.

Espero puedas darme una mano para resolver estas distorsiones. Me gusta mucho este slide.

Gracias. Feliz año.

Responder
José  

Disculpá, el blog donde tengo el slide de la consulta es: josecupelli.blogspot.com

Saludos.

Responder
JMiur  

Es difícil de saber pero, da la impresión de haber algunas propiedades genéricas de la plantilla que afectan esa estructura, una de ellas es la regla que afecta a todas las imágenes de los posts:
.post-body img {}
así que yo agregaría esto:

#slideshow img {
background: none;
box-shadow: none;
padding: 0;
}

Eventualmente, también podrías forzar a que el texto se posicione donde quieras en lugar de dejar que lo calcule el script; con esta otra regla:

.caption {bottom: 0 !important;}

Responder
josecupelli  

Mil gracias, en estos días seguiré probando.

Saludos.

Responder
Tienda Claro Perú  
Este comentario ha sido eliminado por el autor.
Responder
JMiur  

Lo desconozco, para eso, habría que modificar el script de alguna manera.

Responder
Sweet Muse  

Hola JMiur.Existe alguna posibilidad de que la parte oscura semitransparente que muestra la leyenda de la imagen permanezca fija en la transición en vez de que se desvanezca con el cambio de cada fotografía.Gracias.

Responder
JMiur  

Así como está, no. Deberías modificar el script.

Responder
Fuera de Tiempo  

Hola de nuevo Jmiur. Este es el que tengo en el blog y lo uso como slideshow.
Ahora,hay posibilidad de crear enlace con el texto descriptivo que aparece por cada imagen?

JMiur  

Imagino que sí pero no sabría ecirte cómo. Habría que modificar el script.

Fuera de Tiempo  

Lo voy a intentar, gracias de todos modos!

Responder
ariel  

Esta página es una genialidad, gracias por ser tan útiles! :D

Responder
zona lerh  

Hola JMiur,

esta galería se puede hacer pero con un álbum de Picasa y no estar poniendo foto por foto??

JMiur  

Para eso deberías leer el ábum de alguna manera así que el script debería ser compeltamente distinto.

zona lerh  

Hola JMiur,

y tienes algún script que me ayude para poner una galería?

Gracias!!

JMiur  

Si quieres algo que funcione con Picasa, deberás buscar en la web si hay algún gadget que sirva.

Responder
egoloco  

JMiur buenas noches, Es posible poner varios slide como este en una misma página? habrá que cambiar el id de cada uno de ellos o como podría?

Saludos.

JMiur  

Tendrías que usar distintos IDs para cada uno de ellos; tal vez usando clases para definir los estilos y evitar tener que escribir demasiadas reglas.

$("#NOMBRE").craftyslide();

Responder
Juan Gabriel Ruiz García  

Buenas tardes, resulta que intento configurar el Slider, y si pongo valores del fadetime y Delay (por ejemplo 500 y 2500), solo pasa de una imagen a otra, y la ultima no se muestra ... Porque puede ser?

JMiur  

Deberías mostar el ejemplo o consultar con los creadores del script.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR