Galería con Lightbox y precarga de imágenes con descripción

Demo Descarga : ImageLightbox

Galería con Lightbox y precarga de imágenes con descripción, además es adaptable a la pantalla.

Este plugin te ofrece la oportunidad de crear una galería con lightbox incluido, pero lo más importante es que es adaptable y configurable.

Por ejemplo puedes usar el plugin solo con un lightbox, o usar el plugin con un navegador de imágenes, entre otros casos.

 

Para implementar esta galería elegante tenemos que empezar por:

1.- Integrar a jQuery.

<script src="//code.jquery.com/jquery.min.js"></script>

2.- Incluir la hoja de estilos(.css) del plugin

<link href="stylesheets/imagelightbox.css" rel="stylesheet">

3.- Estructura HTML con la imagen original y la imagen thumbnail y el caption o texto de pie de página .

<a href="images/demo1.jpg" class="galeriaSlider">
<img src="images/thumb1.jpg">
</a>

<a href="images/demo2.jpg" class="galeriaSlider" >
<img src="images/thumb2.jpg">
</a>

<a href="images/demo3.jpg" class="galeriaSlider" data-ilb2-caption="Caption 3">
<img src="images/thumb3.jpg">
</a>

4.- Incluir el script (.js) del plugin, después de la estructura de las imágenes

<script src="javascripts/imagelightbox.js"></script>

5.- Crear el script que convierte a los elementos HTML en una galería e incluir los argumentos que necesites.

<script >
$(document).ready(function() {
 $('a.galeriaSlider').imageLightbox({
 activity: false,
 arrows: true,
 button: true,
 caption: true,
 navigation: true,
 overlay: true
 });});
</script>

Si quieres ver más ejemplos de uso de este plugin lo puedes hacer en la siguiente dirección: http://rejas.github.io/imagelightbox/

Contenido relacionado: