Lytebox (una lightbox)

Al final, no me ha quedado otro remedio que "emigrar" a otro blog para seguir experimentando con ésto de las ímágenes... tanto script "addevent" y js no me dejaban probar un sólo script más. Así que, como tenía ganas de probar esta especie de lightbox, me he "fugado" a Imagen, otro blog de pruebas, en el que he insertado esta otra forma de ver y presentar imágenes, obra de LYTEBOX.

Es tan secillita que hasta yo puedo hacerlo, je; y tiene funcionalidades tan variadas como efectos en la apertura de las imágenes (ensanches y mengüas de los bordes que las contienen), presentación en slideshow, presentación por grupos de imágenes o imágenes individuales, presentación de textos en iframe...
Y lo mejor de todo: sólo un CSS y un script js... nada que ver con el endemoniado scriptacolous (que me trae de cráneo) ni bajarse effects ni cosas "raras".

Así que, si os gusta el Lytebox que véis en mi página de pruebas, vamos a comentar cómo se hace:

.- Tenéis que insertar el CSS y el script en sendos enlaces en vuestra página, entre el head y /head. Así:

<script language='javascript' src='lytebox.js' type='text/javascript'/>

<link href='lytebox.css' media='screen' rel='stylesheet' type='text/css'/>

Si querési podeis usar, reformar y lo que os parezca bien, los scripts que he usado (mejor los arregláis... porque me he "asustado" al ver tanta imagen y se me ha pasado subir alguna en el CSS, jajajjaja.... me espanta subir imágenes :( )

<script language='javascript' src='http://junioscripts.googlepages.com/lytebox.js' type='text/javascript'/>

<link href='http://junioscripts.googlepages.com/lytebox.css' media='screen' rel='stylesheet' type='text/css'/>

.- El HTML de las imágenes que vais a insertar, en una entrada o donde os parezca bien, es éste:
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqRMsZeTgUx7s9Q6kiiwzUZfVP7ZTr4lYseTaaiqtzgIgvFAQTjh1kgnB3sYfWGZ2ZWgQo8j43vOOAVps2YzepBesBwPGBniHllNrmLi3_OLJcVggsR9CX7Hm1odpWD3IHL-8Fyy1_dhI/s320/Arturo19.jpg" rel="lytebox[cosas]" title="Arturo"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqRMsZeTgUx7s9Q6kiiwzUZfVP7ZTr4lYseTaaiqtzgIgvFAQTjh1kgnB3sYfWGZ2ZWgQo8j43vOOAVps2YzepBesBwPGBniHllNrmLi3_OLJcVggsR9CX7Hm1odpWD3IHL-8Fyy1_dhI/s320/Arturo19.jpg" style="border: none;" alt="Arturo" /></a>
La URL de la imagen es la src en ambos casos. Este ejemplo es para un grupo de imágenes, donde todas ellas irán con la referencia "re="lytebox[cosas] (o muñecos... o naturaleza... lo que sea que de un nombre común a todas las imágenes del grupo).
Para las imágenes individuales y solas, usaremos un rel=lytebox", sencillamente.
Para slideshows e iframes, casi mejor que os dáis una vuelta por la página del autor, que lo explica con mucha claridad (menos mal).

Y... creo que eso es todo... me encanta, porque es bonita, tiene muchos usos y, sobre todo, es sencillísima de insertar.