Contenido

jQuery Lightbox plugin, mejora el visionado de imagenes

15 oct

+ 6

jQuery lightBox Plugin, como su nombre dice, es una elegante versión de Lightbox desarrollada sobre jQuery. Con tan solo 16kb de peso, este plugin para jQuery hace su función perfectamente y emula a la perfección lo ya visto por plugins desarrollados sobre otros frameworks.

Como usarlo

Primero cargamos los javascript en nuestro <head />

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.2.js"></script>

Añadimos nuestros estilos CSS

<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.2.css" media="screen" />

 Mediante el uso de selectores podremos seleccionar que elementos son los que han de ser tratados por el plugin.

<script type="text/javascript">
$(function() {
   $('a[@rel*=lightbox]').lightBox(); // Seleccionamos todos los elementos cuyo atributo rel contenga "lightbox"
   $('#gallery a').lightBox(); // Seleccionamos todos los enlaces del elementos #gallery
   $('a.lightbox').lightBox(); // Seleccionamos todos los enlaces con clase lightbox
   $('a').lightBox(); // Seleccionamos todos los enlaces
   // ... Muuuuuchas posibilidades más...
});
</script>

Posibilidades

<script type="text/javascript">
$(function() {
   $('a[@rel*=lightbox]').lightBox({
	overlayBgColor: '#FFF',
	overlayOpacity: 0.6,
	imageLoading: 'http://example.com/images/loading.gif',
	imageBtnClose: 'http://example.com/images/close.gif',
	imageBtnPrev: 'http://example.com/images/prev.gif',
	imageBtnNext: 'http://example.com/images/next.gif',
	containerResizeSpeed: 350,
	txtImage: 'Imagem',
	txtOf: 'de'
   });
});
</script>

El plugin permite personalizar nuestro lightbox usando para ello, un objeto json con las siguientes propiedades.

{
	overlayBgColor: "El color de fondo (#000 por defecto)",
	overlayOpacity: "La opacidad del fondo(0.8 por defecto)",
	imageLoading: "Imagen de cargando",
	imageBtnClose: "Imagen de cerrar",
	imageBtnPrev: "Imagen de anterior",
	imageBtnNext: "Imagen de siguiente",
	containerBorderSize: "Padding usado en el contenedor (10px por defecto)",
	containerResizeSpeed: "Velocidad de redimensionado del contenedor (400 por defecto)",
	txtImage: "Texto "Image" usado como caption de la imagen",
	txtOf: "Texto "of" usado como caption de la imagen"
}

[Demo][Descargar]

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.