ago
23
2010

Galería LightBox Flash

Descarga el contenido del Artículo en PDF Download PDF

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

Cerrar
Sharing our website, you will help us with the maintenance. Thank you!

 

Click on any of these buttons to help us to maintain this website.



          
 

Related Posts

Acerca del Autor:

7 Comments + Add Comment

  • 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.

    • 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.

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

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

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

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

  • 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

Leave a comment


6 − tres =

Ayudas!

Recientes

  • Rassndamentals: Hola, Necesitaria ayuda con esto, quiero hacer un programa en lenguaje ensamblador que haga que un...
  • Olga: Si introduces dentro del archivo $ORACLE_HOME/sqlplus/admin/glo gin.sql define _editor=’vi’,...
  • Jkohn Gin: Hola, Dónde puedo conocer o como puedo saber que marcas de discos duros usan los algoritmos de...
  • Ber: Hola hahrukh.com, Tienes algún ejemplo dentro de la web, no son con números decimales sino números enteros, pero...
  • hahrukh.com: Buenas, he estudiado los registros del cpu, los direccionamientos y como tambien las interrupciones(se...