Software

bxGallery : un plugin jQuery para visualizar galerías de imágenes

bxGallery

bxGallery

Si existe algo muy importante en cada una de las entradas, es un post con buenas imágenes o galerías de imágenes. WordPress no ofrece muchas características al respecto y de vez en cuando tenemos que recurrir a algunos de sus plugins (plugins para WordPress), tal como MudSlideShow un plugin con el cual podemos incluir las imágenes o galerías de ellas procedentes de Flickr o Picassa.

bxGalelery es un plugin jQuery de tan solo 4Kb que nos permitirá no solo crear, sino además diseñar las galerías de imágenes a nuestro gusto.

Tiene unos espléndidos efectos y podemos configurarlo gracias a las opciones que incorpora.

Entre sus características no podemos encontrar:

  • Configurar el tamaño máximo de las imágenes.
  • Configurar la opacidad de los thumbnails.
  • Definir la imagen que se mostrará en la precarga.
  • Crear una lista con las miniaturas de forma automática.
  • Asignar dimensiones para la lista, imágenes, contendores, etc…

bxgallery

Como usarlo

Para ello debemos disponer del siguiente código en la zona que vayamos a visualizar las imágenes o galerías, debiendo prestar atención a si jQuery ha sido activado con anterioridad o no antes de la etiqueta head.

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

Con el código anterior, cargamos jQuery y llamamos al script correspondiente.

Posteriormente tenemos que agregar el siguiente código para contener las imágenes. Esto debemos hacerlo dentro de nuestra plantilla y justo después de la etiqueta body.

<ul id="galeriadeimagenes">
<li><img src="ruta/de/la/imagen1.jpg"></li>
<li><img src="ruta/de/la/imagen2.jpg"></li>
<li><img src="ruta/de/la/imagen3.jpg"></li>
<li><img src="ruta/de/la/imagen4.jpg"></li>
</ul>

Ya por último solo nos queda hacer la llamada a la función e indicarle la galería que deseamos visualizar.

$(document).ready(function(){
$('#pics').bxGallery();
});

Como indicaba anteriormente, el plugin es configurable, por lo que tan solo debemos modificar las siguientes opciones:

$('#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'
});
  • 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>) .

 

 

[Vía:infectedfx]