Lightbox plugin de jQuery

Si necesitas superponer imagenes, darle un efecto diferente a tu galería, te recomiendo el uso de este plugin, inspirado en el Lightbox de Lokesh Dhaka.


Lightbox plugin de jQuery es simple, elegante y discreto, no necesita código extra, más que el requerido para la personalización.

ver demo descargar

Uso:

1.- incluimos los archivos necesarios (entre etiquetas head):

<!-- incluimos el jQuery y el plugin lightBox--> 
    <script type="text/javascript" src="js/jquery.js"></script> 
    <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>

   <!-- incluimos el estilo --> 
    <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />

2.- activamos el jQuery (antes de </head>):

<script type="text/javascript"> 
    $(function() { 
        $('#id_div a').lightBox(); 
    });
</script>

cambiamos id_div por el id del elemento div contenedor de la galería.

3.- armamos nuestra galeria:

<div id="id_div"> 
<a href="RUTA/image1.jpg"><img src="RUTA/thumb_image2.jpg" width="72" height="72" alt="" /></a>
<a href="RUTA/image1.jpg"><img src="RUTA/thumb_image2.jpg" width="72" height="72" alt="" /></a>
... aqui mas imagenes
</ul>
</div> 

Vas a necesitar las imágenes en miniatura por cada imagen de tamaño normal.

---

Diferentes formas para activar el plugin: usando selectores CSS.

- asignándolo solo a enlaces con atributos rel='lightbox':

$('a[@rel*=lightbox]').lightBox();

- asignándolos a todos los enlaces dentro de un elemento:

$('#id_elemento a').lightBox();

- asignándolo a todos los enlaces con atributos class='lightbox':

$('a.lightbox').lightBox();

- asignándolo a todos los enlaces de la pagina:

$('a').lightBox();

---

El plugin tiene algunas alternativas de configuración que se establecen cuando se llama.

Clic aquí para mostrar u ocultar la lista

- OverlayBgColor - Se utiliza para definir el color de fondo (negro por defecto).
- OverlayOpacity - Se utiliza para definir la opacidad (0.8 predeterminado).
- ImageLoading - ruta de la imagen gif que indica el loading.. (cargando).
- ImageBtnClose - ruta de la imagen close (cerrar ventana).

Configuraciones añadidas en la versión 0.3:

- ImageBtnPrev - ruta de la imagen previo (anterior).
- ImageBtnNext - ruta de la imagen next (siguiente).
- ContainerBorderSize - valor del relleno CSS utilizado en el cuadro de la imagen del contenedor (10 por defecto).
- ContainerResizeSpeed ​​- La duración del efecto de tamaño en la caja de la imagen del contenedor (400 es el predeterminado).
- txtImage - Texto "Image" (imagen) usado para la paginación (ej: Imagen 2 de 5)
- txtOf - Texto "of" (de) usado para la paginación (ej: Imagen 2 de 5).

Configuraciones añadido en la versión 0.4:

- ImageBlank - ruta de la imagen en blanco a mostrar al posar el mouse sobre la miniatura.
- KeyToClose - Letra para cerrar la imagen mostrada (C por defecto).
- KeyToPrev - Letra para mostrar la imagen anterior. (P por defecto).
- KeyToNext - Letra para mostrar la siguiente imagen (N por defecto).

y su uso es de la siguiente manera:

<script type="text/javascript">
$(function() {
   $('a.lightbox').lightBox({
    overlayBgColor: '#FFF',
    overlayOpacity: 0.6,
    imageLoading: 'RUTA/loading.gif',
    imageBtnClose: 'RUTA/close.gif',
    imageBtnPrev: 'RUTA/prev.gif',
    imageBtnNext: 'RUTA/next.gif',
    containerResizeSpeed: 350,
    txtImage: 'Imagen',
    txtOf: 'de'
   });
});
</script>