Este precioso diaporama no es demasiado complicado.
En primer lugar, tienes que descargarte el Lytebox.
Una vez descargado en el disco duro de nuestro ordenador, lo descomprmimos y obtendremos dos archivos: lytebox.js y lytebox.css que los tendremos que alojar en nuestro servidor.
Ya alojados los archivos, nos situamos en nuestra plantilla Edición HTML y entre <head> y </head> añadimos lo siguiente:
<script type="text/javascript" language="javascript" src="http://rutadelarchivo/lytebox.js"></script>
<link rel="stylesheet" href="http://rutadelarchivo/lytebox.css" type="text/css" media="screen" />
Cambiando lo marcado en rojo por tu ruta personal.
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
Una vez hecho esto, subes las miniaturas de las imágenes (conviene que sean exactamente del mismo tamaño, puede ser un recorte) y las imágenes grandes, y escribes el siguiente código en la entrada del blog o en la página web:
<a href="http://ruta/imagen01.jpg" rel="lyteshow[modigliani]" title="Descripción imagen 01"><img src="http://ruta/imagen01_mini.jpg"</a>
<a href="http://ruta/imagen02.jpg" rel="lyteshow[modigliani]" title="Descripción imagen 02"><img src="http://ruta/imagen02_mini.jpg"</a>
<a href="http://ruta/imagen03.jpg" rel="lyteshow[modigliani]" title="Descripción imagen 03"><img src="http://ruta/imagen03_mini.jpg"</a>
Organizando las miniaturas dentro de una tabla, si te parece, como en este caso.
El rel="lyteshow[modigliani]" es el nombre que en este caso hemos dado al grupo de imágenes y sirve para identificar este álbum concreto y separarlo de otro grupo de imágenes que tengan otro nombre. Por ejemplo rel="lyteshow[mifamilia]".