Aquí teneís todos los archivos para esta trabajar con esta página
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>
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" />
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
.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.
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.<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>