Si lo que estas buscando es un código jQuery para crear galerias de imágenes bxGallery es tu salvación.
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.
Tabla de contenidos
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:
[JAVASCRIPT]
[/JAVASCRIPT]
Después tenemos que crear la lista desordenada con nuestras imágenes:
[HTML]
[/HTML]
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:
[JAVASCRIPT]
$(document).ready(function(){
$(‘#pics’).bxGallery();
});
[/JAVASCRIPT]
Configuración
Como deciamos al principio, el plugin es fácilmente configurable, asi que teniendo en cuenta el siguiente código de bxGallery:
[JAVASCRIPT]
$(‘#pics’).bxGallery({
maxwidth: 500,
thumbwidth: 75,
thumbcrop: false,
croppercent: .35,
thumbplacement: ‘bottom’,
thumbcontainer: ‘400’,
opacity: .7,
load_text: ‘loading…’,
load_image: ‘spinner.gif’,
wrapperclass: ‘outer’
});
[/JAVASCRIPT]
Vamos a definir lo que hace cada cosa (traducción hecha por InfectedFx):
- 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
(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 (
).
Si tenéis dudas con el funcionamiento del plugin, en la web hay un hilo de comentarios en los que seguro os opdéis apoyar o bien preguntar, parece que el autor responde.
Descarga: Plugin bxGallery
Vía: InfectedFx
8 comentarios
Excelente gadget. Como puedo separar el thumbplacement para que queden mas lejos de la imagen principal?. Se puede hacer un css parte?. muchas gracias
En teoría si que puedes usar CSS a parte. Pero no se si te refieres al Caption o a la imagen, pero bastaría con añadirle un padding y solucionado.
Muchas gracias por tu respuesta. No soy un experto en css pero puedo decir que conozco algo del tema. Lo que quiero es dar mas espacio entre la imagen y los thumbnails para colocar enrte medio un caption mas largo.
Mi problema aqui es lograr identificar en el javascript los elementos a los que les puedes aplicar el css. Por ahora logre modificar estos:
ul.thumbs li{
margin-right: 1px;
margin-bottom:5px;
}
.caption{
margin-top: -300px;
}
Esta es la pagina de prueba: http://elhuemulatomico.blogspot.com/p/prueba-comic.html
Muchas gracias por tu ayuda.
no me carga la galería de la web que me has pasado .. se queda pillada en «cargando….»
Bastante extraño, a mi me carga sin problema. Como es un blog de blogger cargo el jquery de manera externa, sera ese el problema?:
$(document).ready(function(){
$(‘#comic’).bxGallery();
});
ul.thumbs li{
margin-right: 1px;
margin-bottom:5px;
}
.caption{
margin-top: 0px;
}
esto es lo que yo veo ..
http://img38.imageshack.us/img38/1471/screenshot1pw.png
Bueno, me disculpo por tanto problema. Creo que ahora estara funcionando. Se deberia ver esto:
http://1.bp.blogspot.com/-MHi0JGX4oIo/Tp2G2yWqE9I/AAAAAAAAExY/Y8kCN6BJPjk/s1600/prueba2.png
La idea seria darle mas espacio al caption. Gracias nuevamente.
asi no puedo ayudarte, tan solo puedo decirte que lo puedes hacer con el padding o margin tal y como te dije anteriormente, pero es que sigo sin ver la URL, si la puediera ver, mirando el codigo te podria decir el codigo CSS que tienes que incluir.