Craftyslide: Una galería sencilla para jQuery

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