Si lo que estas buscando es un código jQuery para crear galerias de imágenes bxGallery es tu salvación.

bxGallery - Plugn jQuery para generar galerias de imágenes con listas desordenadas

Este plugin se encarga de crear una galería de imágenes a partir de una lista desordenada con tus imágenes. Tan sólo ocupa 4Kb y además es muy configurable no solo en cuanto a código sino también en apariencia.

Características de bxGallery

Entre las características de bxGallery podemos citar:

  • Cross browser (incluyendo IE6)
  • Crea una lista con las miniaturas automaticamente
  • Configuras el tamaño máximo de las imágenes
  • Asignas la clase que desees al contendor
  • Configuras la opacidad de las thumbnails
  • Defines la imagen que se mostrará para precarga
  • Asignas dimensiones para la lista, imágenes, contendores

Para descargar el plugin tenéis que acceder a este enlace bxGallery plugin, y si lo queréis ver en acción podéis ver la demo

¿Cómo usar bxGallery?

El plugin bxGallery es muy sencillo de utilizar. Para empezar tenemos que integrar en la página tanto el jQuery como el plugin y esto se logra haciendo una llamada dentro de las etiquetas HEAD de la siguiente manera:

PLAIN TEXT
JAVASCRIPT:
  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  2. <script type="text/javascript" src="js/jquery.bxGallery.min.js"></script>

Después tenemos que crear la lista desordenada con nuestras imágenes:

PLAIN TEXT
HTML:
  1. <ul id="pics">
  2.     <li><img src="path/to/image1.jpg"></li>
  3.     <li><img src="path/to/image2.jpg"></li>
  4.     <li><img src="path/to/image3.jpg"></li>
  5.     <li><img src="path/to/image4.jpg"></li>
  6. </ul>

Fijaros que a la lista se le ha asignado una ID para su posterior referencia (id="pics").
Ahora tenemos que vincular la lista desordenada llamando a la función para que se ejecute la galería:

PLAIN TEXT
JAVASCRIPT:
  1. $(document).ready(function(){
  2.    
  3.     $('#pics').bxGallery();
  4.    
  5. });

Configuración

Como deciamos al principio, el plugin es fácilmente configurable, asi que teniendo en cuenta el siguiente código de bxGallery:

PLAIN TEXT
JAVASCRIPT:
  1. $('#pics').bxGallery({
  2.     maxwidth: 500,   
  3.     thumbwidth: 75, 
  4.     thumbcrop: false,
  5.     croppercent: .35,
  6.     thumbplacement: 'bottom',
  7.     thumbcontainer: '400',
  8.     opacity: .7,
  9.     load_text: 'loading...',
  10.     load_image: 'spinner.gif',
  11.                    wrapperclass: 'outer'
  12. });

Vamos a definir lo que hace cada cosa (traducción hecha por InfectedFx):