Lightbox. Enlazar imágenes sin salir de la página

julio 12, 2007
Me ha gustado mucho la entrada de Luis Barriocanal sobre el Encuentro de Edublogs de Ayerbe. El contenido, sobre todo… pero también la forma. A partir de un texto, se vinculan imágenes que se cargan en una ventana emergente que se adaptan al tamaño de cada una de las imágenes. Preguntado que qué había utilizado para hacer esto, me dice que es un plugin para WordPress.
Así, buscando algo parecido para webs en general, y ver si también funcionaba en Blogger, he llegado al Lightbox.
He tenido cierta dificultad para su instalación y funcionamiento. En una web en la que todo se puede subir por ftp y las carpetas están próximas, no ha habido ningún problema.
Para empezar, hay que descargar el Ligntbox v2.03.3
Se descarga un archivo comprimido que, al descomprimirlo, da como resultado un index.html y tres carpetas: css, images y js
Estas tres carpetas, las he metido dentro de otra y lo he mandado a un servidor que permita el ftp normal.
Una vez hecho esto, he comprobado que si hacía la actividad en esa web, las cosas funcionaban correctamente sin hacer nada más que seguir las instrucciones indicadas en la web y en el index.html descargado. En este blog, ha habido que hacer algo más.

1.- El código javascript en la cabecera de la plantilla del blog. Entre <head> y </head> Sustituyendo las llamadas a los 3 archivos .js y a la hoja de estilos .css por sus rutas absolutas.
3.- Una vez hecho esto, he pegado, en esta entrada, el código que se comenta en la página oficial, sustituyendo el rel=»lightbox» por rel=»http://rutadelacarpeta/lightbox», es decir, haciendo una relación empleando una ruta absoluta pues los archivos y esta entrada se encuentran en servidores diferentes.

Ejemplo de un vínculo:
<a href=»http://www.rutadelaimagen.jpg» rel=»http://rutadellightbox/lightbox» title=»Texto del título de la imagen»>Título de la imagen</a>

Para finalizar, he tenido problemas con el gif animado que gira mientras se carga la imagen y con la cruz para cerrar la ventana emergente.

Esto se ha arreglado, cambiando, en el archivo lightbox.js dentro de la carpeta js las siguientes líneas:
var fileLoadingImage = «images/loading.gif»;
var fileBottomNavCloseImage = «images/closelabel.gif»;
Por la ruta absoluta de ambos gifs:
var fileLoadingImage = «http://rutadelacarpeta/images/loading.gif»;
var fileBottomNavCloseImage = «http://rutadelacarpeta/images/closelabel.gif»;
En fin, un poco complicado pero creo que merece la pena.

Pongo un ejemplo:

Picasso: cinco obras de sus primeros tiempos.
Picasso nace en 1881. Con sólo 16 años pinta esta extraordinaria Ciencia y caridad. En 1901, este Autorretrato. De su «periodo azul», el famoso La vida que data de 1903. Dos años más tarde, este Acróbata y joven arlequín. Esta Familia de saltimbamquis de 1905 se considera de transición al «periodo rosa».

También se puede hacer con una miniatura de la imagen. En este caso hay que sustituir el texto del vínculo por <img src=»http://rutadelaminiatura.jpg» />
Es lo que he hecho en el ejemplo de utilización en una web normal con alguna imagen obtenida en el 2º Encuentro.

9 comentarios | imágenes, lightbox, visor imágenes | Enlace permanente
Escrito por angelpuente