Desde que me rebané la sesera para hacer funcionar el efecto Zoomi con JQuery hasta ahora ha pasado mucho tiempo. Ahora ya comienzo a comprender el asunto y hacer funcionar un script como Lightbox no me supone un quebradero como aquel pero me gusta dejar una memoria para futuros proyectos y para que sirva de apoyo a algún que otro lector.
Tras buscar por la red un efecto bonito y sencillo para incorporar a unas imágenes de una pequeña web que me han encargado opté por Lightbox por ser un script sencillo de implementar y con un resultado visual muy atractivo y elegante como puede verse aquí.
En la web oficial vienen detallados todos los pasos para implementarlo pero vamos a hacerlo aquí de una manera más descriptiva a la vez que usamos KompoZer para realizar la mayor cantidad de trabajo posible en un modo de edición visual y no picando código (aivá, parezco un profesional auténtico)
Una vez descargada la última versión de Lightbox, en mi caso la 2.04 descubrimos que tras descomprimir hay una carpeta con varias subcarpetas:
- css: incluye el archivo para el estilo de la página. En su momento tendremos que enlazar nuestros HTML a este CSS.
- images: con todo lo necesario para que el script muestre botones, cargadores… En su momento crearemos algunos nuevos para que nuestro script muestre esta información en español.
- js: donde se encuentran los javascripts necesarios para que todo esto funcione.
Además tenemos al lado de estas carpetas un archivo llamado index.html para poder acceder a un tutorial sobre la puesta en marcha del script y que usa las imágenes de antes.
Tenemos una imagen en tamaño miniatura y la original a tamaño real que saldrá al ejecutar el script:
Lo primero es ir al código y pegar entre <head> y </head> las tres líneas que llaman a los javascripts.
<script type=»text/javascript» src=»js/prototype.js»></script>
<script type=»text/javascript» src=»js/scriptaculous.js?load=effects,builder»></script>
<script type=»text/javascript» src=»js/lightbox.js»></script>
|
Tal y como puede verse en las rutas relativas (js/..) se está dando por supuesto que nuestro archivo estará situado al lado de la carpeta js, por lo que si nuestro archivo va a llamarse index.html debemos renombrar el del tutorial o se sobreescribirá.
Bien; pues ya tenemos las llamadas a los javascripts insertados. La llamada al CSS vamos a hacerla desde el editor visual. Se supone que ya tenemos guardado nuestro proyecto como index.html al lado de la carpeta js; así que vamos al editor de CSS (Herramietas/Editor CSS) y escojemos Hoja de estilos enlazada:
Una vez marcada la ruta hacia la carpeta css y su archivo lightbox.css ésta aparecerá en la lista de hojas de estilo:
Con esto se ha creado automáticamente (entre <head> y </head>) la siguiente línea en el código…
| <link rel=»stylesheet» href=»css/lightbox.css» type=»text/css» |
…que es exactamente la misma que nos dice el tutorial que podíamos insertar a mano.
Es el momento de incluir la miniatura en el proyecto (Insertar/Imagen) y de crear en ella un enlace (Insertar/Enlace) cuyo destino es la imagen grande.
Para que al hacer clic sobre la miniatura se produzca el efecto deseado tan sólo tenemos que asignarle al enlace el atributo rel=»lightbox». Para hacerlo de manera gráfica, sólo tenemos que hacer clic derecho sobre la etiqueta <a> en la parte baja de la interfaz (hay que asegurarse de tener seleccionada la miniatura en cuestión):
Esto nos despliega un cuadro en el que escogemos en el campo de la izquierda en atributo rel y escribimos en el de la derecha el valor lightbox:
La apariencia después de la animación que amplía la imagen es esta:
¿Qué podemos hacer a partir de aquí?.
Pues cambiar la imagen que incluye el texto CLOSE y la X por un nuevo GIF como este:
Y también podemos insertar un pie de página para hacer una descripción de la imagen siempre que le añadamos a la etiqueta <a> el atributo title del mismo modo que antes le añadimos el atributo rel.
Este sería un ejemplo en el que ya se incluye el cambio de la imagen para salir del efecto:
¡Listo!
Ya tenemos el efecto lightbox para esa imagen. Puede ver el ejemplo aquí.
NOTA: es posible hacer que al ejecutar el javascript se muestre una secuencia de imágenes con una agradable transición entre ellas. El método a seguir es añadir entre corchetes el nombre del grupo al que pertenecen las imágenes a mostrar. Lo mejor es un ejemplo:
Esto hace aparecer nuevos botones que quizá deberían ser sustituidos por versiones en español y un texto que dice, por ejemplo, Image 2 of 6 (en inglés).
Después de mirar algo el asunto he visto que esto puede cambiarse si accedemos al archivo lightbox.js con un editor del tipo Gedit para Linux o Notepad++ para Win y editando en esta parte:
Y eso es todo. espero que le saque producto a este bonito efecto así como a otros muchos que se hacen funcionar de una manera similar.
Joaclint 
