Crear galerías de imagenes con JQuery

JMiur

Ultimate Fade-in slideshow es un script de Dynamic Drive que crea galerías animadas con imágenes y utiliza JQuery.

Tiene muchas opciones personalizables: velocidad, posibilidad de generar galerías manuales o automáticas, usar enlaces, agregar textos con descripciones, y tal vez, lo más interesante, es que podemos agregar varias en la misma página, cada una con sus respectivas opciones.

Vamos con lo simple ... en la página del autor se pueden ver otros ejemplos y posibilidades.

Primero que nada, si no la tenemos agregada, necesitamos JQuery que ponemos antes de </head>; la cargamos directamente desde las librerías de Google de este modo:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.js' type='text/javascript'/>

Luego, descargamos el script fadeslideshow.js y lo alojamos en algún servidor o lo copiamos y pegamos directamente en la plantilla:

<script type='text/javascript'>

//<![CDATA[
  // AQUÍ PEGAMOS EL CONTENIDO DEL ARCHIVO
//]]>
</script>

En el script sólo necesitamos modificar las direcciones de las imágenes que son tres y que también podemos descargar desde la web del autor: restore.png, x.png y loading.gif.

¿Cómo lo usaremos? Basta colocar un DIV con un ID donde querramos mostrar la galería, por ejemplo:

<div id="fadeshow1"></div>

Y a continuación de eso llamamos a la función y establecemos las opciones:

<script type="text/javascript">
  // le damos un nombre único, si usamos otra, le ponemos otro nombre
  var migaleria1 = new fadeSlideShow({
    wrapperid: "fadeshow1", / este es el ID del DIV anterior y también debe ser único
    dimensions: [400, 260], // aquí indicamos el ancho y el alto, si usamos imágenes de diferente tamaño, poemos el tamaño mayor
    // colocamos la lista con las direcciones URL de las imágenes a mostrar
    imagearray: [
      ["URL_imagen_1"],
      ["URL_imagen_2"],
      ["URL_imagen_3"],
      ["URL_imagen_4"]
    ],
    // el resto de las opciones
    displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
    persist: false,
    fadeduration: 500,
    descreveal: "ondemand",
    togglerid: ""
  })

</script>

donde, las opciones posibles son:

displaymode es obligatorio y tiene varios parámetros:

type puede ser auto o manual e indica la forma en que se mostrará la galería
pause indica la pausa entre imágenes (en milisegundos)
cycles si ponemos 0, el slideshow se repetirá indefinidamente, cualquier otro valor indica la cantidad de veces que se ejecutará
wraparound si ponemos false deshabilita algunas de las funciones al navegar manualmente
randomize si ponemos true, las imágenes se muestran en cualquier orden

persist lo ponemose en true si si queremos que se agreguen cookies de tal modo que el navegador "recuerde" el estado de la galería y no deba recargar todo al volver a entrar en la página

fadeduration es la duración de las trancisiones (por defecto es 500)

descreveal es lo que permite establecer las diferentes opciones de los textos que podemos agregar y no he probado

Si quisiéramos colocar una barra de navegación, debajo del DIV, colocaríamos otro con este esquema:

<div id="fadeshow1toggler">

  <a href="#" class="prev"><img src="URL_imagen_anterior" /></a>
  <span class="status"></span>
  <a href="#" class="next"><img src="URL_imagen_siguiente" /></a>

</div>

y en el parámetro togglerid, pondríamos el ID de ese DIV; por ejemplo:

togglerid: "fadeshow1toggler"

En ese DIV, es importante colocar las clases tal como están definidas ya que son utilizadas dentro del script; si queremos poner otros nombres, deberemos editar el código.