Ejemplo del uso de Lightbox2

Ponemos un juego de fotos

BAJAR

Lightbox

Aquí teneís todos los archivos para esta trabajar con esta página

Cómo usarlo

Instrucciones paso a paso

PartE 1 - Configurarlo

Lo primero es bajarse la carpeta completa ( enlace en la parte superior )
Veremos unos archivos java en la carpeta js que son jquery-1.10.2.min.js y lightbox-2.6.min.js . Estos archivos son los que se llaman para conseguir la transición de la foto pequeña a la grande con el oscurecimiento de la pantalla. Los vamos a poner casi al final de la página , antes de que cierre la etiqueta <body>:
```
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/lightbox-2.6.min.js"></script>
```
Dentro de la carpeta css tenemos el archivo lightbox.css . Esta línea hay que ponerla en la cabecera, antes de la etiqueta </head>:
```
<link href="css/lightbox.css" rel="stylesheet" />
```
Dentro de la carpeta img tenemos varias imágenes necesarias para mostrar e informar bien de las imágenes. Son close.png, loading.gif, prev.png, y next.png. Estos archivos son usados en lightbox.css. Por defecto, lightbox.css buscará estas imágenes en esta carpeta img.
Hemos incluido la carpeta imagenes y dentro de ellas, para las imágenes pequeñas, otra carpeta llamada thumb donde se guardan las imágenes de estos animales en miniatura.

Parte 2 - Puesta en marcha

Para que se active Lightbox hay que poner el atributo


			data-lightbox

a cada imagen, además de un único nombre a cada imagen. Un ejemplo es el siguiente:

<a class="example-image-link" href="imagenes/elefante.jpg" data-lightbox="example-set" title="Aquí ponemos el título de la foto">
<img class="example-image" src="imagenes/thumb/elefante.jpg" alt="Elfantes" width="200" height="133"/></a>

title se usa para poner el título a la foto.

Para el resto de las imágenes hay que proceder de igual forma, dando lugar algo como

<a class="example-image-link" href="imagenes/cebras.jpg" data-lightbox="example-set" title="Para pasar la imagen, pincha en la parte derecha de la imagen.">
<img class="example-image" src="imagenes/thumb/cebras.jpg" alt="Plants: image 1 0f 4 thumb" width="200" height="143"/></a>

<a class="example-image-link" href="imagenes/elefante.jpg" data-lightbox="example-set" title="O presiona la flecha derecha del teclado.">
<img class="example-image" src="imagenes/thumb/elefante.jpg" alt="Elfantes" width="200" height="133"/></a>