Pedir presupuesto

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

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:

[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

¿Te ha gustado?, Comparte!!

Compartir en facebook
Compartir en twitter
Compartir en linkedin
Compartir en whatsapp
Compartir en email

8 comentarios

  1. Excelente gadget. Como puedo separar el thumbplacement para que queden mas lejos de la imagen principal?. Se puede hacer un css parte?. muchas gracias

  2. 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.

  3. 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;
    }

  4. 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.

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

¡Pide tu presupuesto!

Completa los campos para poder enviarte un presupuesto

Todos y tu presupuesto son a medida y totalmente personalizados, entendemos que dos proyectos online no pueden ser iguales y que cada cliente tiene unos objetivos y necesidades muy diferentes, es por eso que para elaborar un presupuesto, necesitamos saber de ti, tu proyecto y objetivos.

Los campos marcados con (*) son obligatorios.

La comunicación enviada quedará incorporada a un fichero del que es responsable COLORDEU. Esta comunicación se utilizará exclusivamente para tratar sus datos para atender su solicitud, siempre de acuerdo al Reglamento (UE) 2016/679 (RGPD), la Ley Orgánica 15/1999 (LOPD) y el Real Decreto 1720/2007 de desarrollo de la LOPD), sobre protección de datos. Sus datos no se comunicarán a terceros, excepto por obligación legal, y se mantendrán mientras no solicite su cancelación. En cualquier momento usted puede ejercer los derechos de acceso, rectificación, portabilidad y oposición, o si procede, a la limitación y/o cancelación del tratamiento, comunicándolo por escrito, indicando sus datos personales mediante un email a hola@colordeu.es