Lightbox para Blogger (Muy Bueno)

Lightbox es un conjunto de scripts utilizadas para visualizar imágenes de una manera llamativa, atractiva y original, con la posibilidad de crear galerías de imágenes. Si en tu blog abundan las imágenes y sueles hacer típicas galerías sencillas donde solo pones las imágenes en la entrada y ya, ésto te puede interesar.

Lo primero que debemos hacer es descargar los scripts desde la página principal de lightbox, en esa misma página puedes ver un ejemplo del funcionamiento de Lightbox.

Los archivos vienen en una carpeta comprimida, la cual tiene tres carpetas dentro: css, js e images. Dentro de ésta última vienen varias imágenes, debemos alojar en algún servidor las siguientes:

• closelabel
• loading
• nextlabel
• prevlabel
  

Una vez hecho eso, abrimos los archivos lightbox.js y lightbox.css con algún programa como Notepad++ para modificarlos de la siguiente manera:

lightbox.js:

fileLoadingImage: 'URL_IMAGEN_LOADING'
fileBottomNavCloseImage: 'URL_IMAGEN_CERRAR'

lightbox.css

#prevLink:hover, #prevLink:visited:hover { background: url(URL_PREV) left 50% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(URL_NEXT) right 50% no-repeat; }

Sólo sustituimos lo que está en mayúsculas por la dirección donde alojamos las imágenes correspondientes, guardamos, alojamos éstos 2 archivos en algún servidor y listo.

Ahora, en la Edición de HTML de nuestro blog agregamos las siguientes líneas:

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

<script src='http://www.google.com/jsapi'/><script>
google.load("prototype", "1.6.0.2");
google.load("scriptaculous", "1.8.1");
</script>

<script src='URL_LIGHTBOX.JS' type='text/javascript'/>

Sustituimos las direcciones correspondientes y listo.

Ahora cuando publiquemos una entrada y deseemos utilizar lightbox, bastará hacerlo de la siguiente manera:

<a href="URL_DE_LA_IMAGEN" rel="lightbox" title="TITULO_DE_LA_IMAGEN"><img src="URL_DE_LA_MINIATURA" alt=""/></a>

Observa el rel="lightbox" ese es imprescindible ya que es lo que indica que la imágen se abrirá con lightbox. Para hacer una galería, inmediatamente después del lightbox, añadimos un identificador entre corchetes: rel="lightbox[galeria]", todas las imágenes que irán dentro de una misma galería deberán llevar el mismo identificador.

Puedes ver un ejemplo del Lightbox un poco modificado en mi blog de pruebas.

He modificado un poco el lightbox.css, puedes hacerlo también a tu gusto para obtener un resultado más original.