Saltar al contenido
Codifíca.me | Desarrollo web | Programación

Galería LightBox Flash

23 agosto, 2010

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

Entradas relacionadas

Responder a admin Cancelar la respuesta

Tu dirección de correo electrónico no será publicada.

Comentarios (8)

Hola:
Antes que nada darte la gracias por este aporte.
Tengo una web hecha en flash, la cual tiene dos ficheros html, uno para el index(al que le he incrustrado un fichero .swf) y otro (también le he incrustado un fichero .swf) donde aparece la página principal de la web, que es un menú, y de ahí se va llamando a las diferentes secciones de la web, sin que desaparezca el menú. Esta web tiene muchas imagenes en casi todas las secciones, como puedes comprobar, si entras. Antes de ponerme a seguir los pasos que indicas estoy viendo que el fichero .html donde tengo la página principal de la web se me va a hacer kilométrico, ya que tendría que ponerle muchísimas veces esta línea,
foto1
¿Habría otra manera de llamar a todas esas imágenes de otra manera?
Saludos y gracias.

Responder

Hola Loli,
Respondiendo a tu pregunta, creo que lo más sencillo es hacer un bucle en javascript, con la que vayas repitiendo la sentencia foto1 y donde los ‘1’ sean un variable que va incrementándose.
Un saludo.

Responder

Hola ese codigo en AS3 no es a si estas mal, eso no funciona
Gracias

Responder

Hola Juan, dinos que te falla y le echamos un ojo.
Un saludo

Responder

declaras un scrip como LightBoxGenerate y luego lo llamas desde flash con otro nombre ( LightboxDelegate) en que quedamos ?

Responder

Gracias Dani,
No me había fijado, lo cambio.

Responder

Que me recomiendan, para crear una Galería fotográfica en Flash, tengo una que se llama LightBox, pero no logro que funcione la transparencia de la ventana y tampoco los botones de NEXT y PREV, me puedem ayudar.?
Saludos

Responder

Hola amigos ,
no se si me ayuden a solucionar un problema pues acabo de bajarme una plantilla hecha en flash y necesito insertarle una galería de imagenes pero es imposible ya que la plantilla
no lo acepta, pero buscando y buscando en la red , encontré
un efecto que es hecho en flash llamado (lightbox)
Como puedo hacer que mi plantilla ponerle este efecto ??

gracias y saludos

Responder