Mini tutorial para incorporar una galería LightBox Flash en tu web.
Empezamos por descargar las librerías desde aquí, la página oficial. Es OpenSource, por cierto. Tambíen podremos ver ahí como serán los resultados al terminar el tuto.
Descomprimimos el archivo dentro del directorio de nuestro proyecto donde queramos agregar el efecto.
En nuestra página donde deseemos insertar estas ampliaciones, lo adjuntaremos así:
<script type=”text/javascript” src=”js/prototype.js”></script>
<script type=”text/javascript” src=”js/scriptaculous.jsload=effects,builder”></script>
<script type=”text/javascript” src=”js/lightbox.js”></script>
<script type=”text/javascript” src=”scripts/swfobjet-modified”></script>
Este último será el encargado de enlazar con nuestra película swf (puede ser una imágen en Flash, no es necesario que sea película);
Vamos a realizar un primer contacto con unos enlaces a nuestras fotos.
<a href=”nuestraCarpeta/1.jpg” rel=”lightbox[galeria1]“>foto1</a>
<a href=”nuestraCarpeta/2.jpg” rel=”lightbox[galeria1]“>foto2</a>
<a href=”nuestraCarpeta/3.jpg” rel=”lightbox[galeria1]“>foto3</a>
Así de sencillo sería enlazar el efecto con nuestras fotos con muy pocos líneas de código.
Comentar que el motivo de poner la línea rel=”lightbox[galeria1]“, aparte de para llamar al lightbox, le añadimos un array con el nombre de le queramos dar, con el fin de añadirle un Next Prev con los que nos moveremos por la galería.
Para incluir botones Flash en lugar de los href y que llamen a la galería, añadiremos el siguiente script en el <head> de nuestro documento.
<script type=”text/javascript”>
function LightBoxGenerate(url,caption){
var objLink = document.createElement(’a’);
objLink.setAttribute(’href’,url);
objLink.setAttribute(’rel’,’lightbox’);
objLink.setAttribute(’title’,caption);
Lightbox.prototype.start(objLink);
</script>
Es una función que se le pasan dos parámetros, la url de nuestra foto, y caption, que es el pie de foto que le podemos añadir a modo de descripción. Si no queremos que salga descripción alguna de las fotos, simplemente eliminar la línea donde asigna el atributo caption.
Ahora solo nos queda agregar el código que va a llamar a la función de JS que hemos creado antes.
Si lo hacéis en AS2 sería así:
on(release){
getURL(”javascript:LightboxGenerate(’imagen.jpg’,’caption1′)”);
}
Con AS3 el cambio sería el siguiente:
foto1_btn.onRealese=function(){
getURL(”fotos/1.jpg”,”_blank”);
}
Os daréis cuenta, de que cuando hayáis instalado la galería, se os situará detrás de los elementos flash, o estos desaparecerán. Para corregirlo, abriremos el archivo lightbox.js, y tenemos que cambiar unas entradas en unas funciones llamadas HideFlash, y FlashEmbeds, donde pone hidden a visible.
function hideFlash(){
var flashObjects = document.getElementsByTagName(”object”);
for (i = 0; i != flashObjects.length; i++) {
flashObjects[i].style.visibility = “visible”;
}
var flashEmbeds = document.getElementsByTagName(”embeds”);
for (i = 0; i != flashEmbeds.length; i++) {
flashEmbeds[i].style.visibility = “visible”;
}
Esto es todo, si tenéis alguna duda, sólo comentarla. Salu2