bxGallery es sin duda un plugin para jQuery muy completo para sus ~4kb hace maravillas solo tienes que agregar una lista desordenadas con tus imágenes y bxGallery hará el resto para obtener una útil galería de imágenes. Es muy configurable, además de sencillo de adaptarle algún diseño.
Algunas de las características relevantes de bxGallery
- 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
Como verán es un script muy poderoso y se le puede sacar mucho provecho...
El archivo lo pueden descargar desde bxGallery plugin al igual que ver un par de demostraciones de cómo funciona y los diversos parámetros de configuración.
Implementación
Es muy sencillo hacer funcionar este script, lo primero que deben hacer es en su html antes de la etiqueta head poner lo siguiente:
Primero cargamos jQuery y luego mandamos a llamar el script jquery.bxGallery.min.js
-
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
-
<script type="text/javascript" src="js/jquery.bxGallery.min.js"></script>
Ahora después de la etiqueta body creamos una lista desordenada con nuestras imágenes y le asignamos un ID esta parte es importante, pueden tener enlace si quieren, no hay problema por eso.
-
<ul id="myID">
-
<li><img src="pix/imagen01.png" alt="imagen01" width="400" height="400" /></li>
-
<li><img src="pix/imagen02.png" alt="imagen02" width="400" height="400" /></li>
-
<li><img src="pix/imagen03.png" alt="imagen03" width="400" height="400" /></li>
-
</ul>
Por último hacemos la llamada a la función para que se ejecute nuestra galería
-
$(document).ready(function(){
-
$('#myID').bxGallery();
-
});
Listo, con eso nuestra galería debe de estar funcionando 
Configuración
bxGallery nos ofrece bastantes opciones para configurarlo, veamos para que funciona cada una.
- maxwidth : default ''
Ancho máximo de las imágenes principales en un aspecto relativo al tamaño original. - maxheight : default ''
Alto máximo de las imágenes principales en un aspecto relativo al tamaño original. - thumbwidth : default '200'
Ancho de la miniatura se especifica en píxeles. - thumbcrop : default false
(true / false ) — Si ponemos la opción en true, las dimensiones de la miniatura será un cuadrado perfecto con una imagen recortada en su interior, por otro lado si dejamos false solo hará un resize de la imagen manteniendo su aspecto. - croppercent : default ''
(0 / 1) — Solo se usa si thumbcrop es true y especifica el porcentaje de compresión de la imagen antes de ser recortada. - thumbplacement : default 'bottom'
('left', 'right', 'top', 'bottom') — Especifica en donde se encontrarán las thumbnails en relación a la imagen principal. - thumbcontainer : default ''
Especifica el ancho de la lista desordenada (<ul>) donde se encuentran las thumbnails. - opacity : default '0.7'
(int 0 - 1) — Define la opacidad inicial de las miniaturas, al pasar el mouse encima cada una tendrá una opacidad del 100% (1). - load_text : default ''
Especifica el texto que se mostrará mientras se está cargando. ejemplo: "por favor espere ..." Nota: Este valor será anulada si load_image contiene un valor - load_image : default 'spinner.gif'
Especifica la imagen que se mostrará se carga la galería. Este valor anula load_text Se puede poner la ruta relativa o absoluta . ejemplo: "proyecto/images/loading.gif". - wrapperclass : default 'outer'
Especifica la clase que se asignará al contendor de la galería (<div>) .
Y para no variar les dejo el archivo con una galería de muestra prediseñada para que les sea más sencillo manipularla y comprender el uso de este sencillo script.
7 comentarios para bxGallery : Galería de imágenes con jQuery
esta muy bueno el plugin gracias
Muy bueno el post, como ves he publicado un post en referencia al tuyo también…
Una pregunta … ¿que plugin utilizas (si es que utilizas) para poner código en tus posts?
Es genial y me gustaría implementarlo en mi BLOG (COLORATE)
Gracias y un saludo.
@soratofx: Que bueno que te agradó, espero seguir encontrando cosas interesantes
@colorate Gracias por la referencia y me alegra que te haya gustado el post. El plugin que utilizo es el iG:Syntax Hiliter es algo viejo y recuerdo que tuve que meterle mano para que se viera así. Aunque WP-Syntax se ve que está muy bueno. Saludos
Hola,
llevo dos dias intentando fusionar la galeria bxGallery intentando que aparte del evento click que tiene la galeria, se pueda hacer algun javascript a mano para hacer un autoplay… y no hay manera, me podrias aconsejar con alguna idea que te pase por la cabeza?
Muchas gracias .
Cómo le hago para que mi galeria sea un poco mas lenta?
muy útil! voy a explorarlo y ver si lo puedo usaren la remodelación de mi sito!
Hola! Como podría hacer para que se carguen fotos verticales y fotos horizontales sin que se estiren y pierdan la calidad?
Saludos y muchas gracias!