jQuery Simple Thumbs - Crea simples galerías de imágenes de una forma fácil.

Más sobre el programa :: Requerimientos :: Videos :: Actualizaciones

jQuery simple Thumbs es una sencilla pero muy buena opción en caso de necesitar mostrar una tira de imágenes o thumbnails y al cliquear en una de las miniaturas, poder visualizar la fotografía.

El script es un complemento para la conocida librería jQuery, muy fácil de instalar y configurar, además de ser completamente gratuito.

A continuación puedes ver como instalar el ejemplo en tu sitio web y otra información.

Mas información sobre el programa.

¿ En que consiste el plugin ?

Como se dijo anteriormente, el script permite insertar fácilmente una tira de thumbnails y al hacer clic en un gráfico poder visualizar la imagen mostrando también un sencillo efecto de transición entre cada pase de imagen. ( Contiene un solo efecto de transición )

En caso de necesitar mostrar muchas imágenes, es posible navegar por la galería utilizando controles de navegación para la imagen previa y siguiente, como también iniciar un slideshow para cambiar la fotografía en forma automática cada un cierto intervalo de tiempo ( Esto último lo puedes ver en el segundo ejemplo publicado en la web del autor).

Captura de pantalla:

Instalar el script en la página web.

En la web del autor , en este enlace, podrás encontrar además del plugin, como poder insertar las imágenes para crear la galería. ( Crear los DIVS, asignar el atributo Class a las imágenes etc ..)

También ( al final de la página ), muestra como configurar otros parámetros y opciones, como por ejemplo:

Precargar todas las imágenes de la galería antes de poder utilizarlas. Esta opción es muy útil si la galería contendrá muchas imágenes.
Establecer y definir los botones Anterior y Siguiente imagen.
Determinar el intervalo en milisegundos en caso de activar el slideshow.
La velocidad de transición entre cada gráfico.
Definición de funciones CallBack.
Otros.

Todas las opciones anteriores, las puedes configurar abriendo el archivo Javascript con tu editor de páginas web. Los parámetros y variables son los siguientes:

jQuery("#thumbnails").simplethumbs({ 
    slideshow: "",// 
    preload: true,// si está en True se cargarán automáticamente las imágens antes de comenzar con la presentación de diapositivas.
    activeClass: "active",// Nombre de la Clase HTML que contiene el Thumbnail o imagen
    speed: 600,// Velocidad para el efecto de transición entre las imágenes.
    next: "#next-image",// Es el botón para la imagen siguiente de la barra de navegación.
    prev: "#prev-image",// Es el botón para la imagen anterior de la barra de navegación.
    wrap: false,// Si está en true, cuando se llega a la última imagen, comienza nuevamente desde el principio, cuando se utilizan los botones "siguiente" y el botón "anterior"
    cycle: false,// Si está en true, el slideshow comenzará de forma automática.
    cycleWrap: true,// Permite detener la presentación de diapositivas cuando se llega al final.
    interval: 3000,// tiempo o delay  entre el cambio de las imágenes.
    reverse: false,// si está en true, cuando llegue al final se mostrará la presentación desde el final hasta el principio.
    startCycle: "#start-cycle",// Para iniciar el  slideshow 
    stopCycle: "#stop-cycle",// Para detener el slideshow
});