LIGHTBOX Y FLASH: COMO LLAMAR A LIGHTBOX DESDE UN BOTÓN DE FLASH?
Bueno, a veces, para hacer en flash un efecto igual al que nos ofrece lightbox, cuando ya tenemos lightbox en nuestro poder puede dar algo de pereza ponernos con las transiciones y el actionscript de flash, básicamente porque lightbox nos lo da hecho.
Pues bien, hay una manera sencilla para hacer posible, que desde un botón de una película flash seamos capaces de abrir una imagen con lightbox, es decir, activar lightbox desde flash. Para levantar una imagen desde lightbox, hay que incluir unos ficheros (lightbox.js y lightbox.css) en el <head></head> de nuestra página web, y después, en el ancla (<a></a>) añadir el atributo rel="lightbox".
Pues bien, como sabemos esto, literalmente no podemos hacerlo en flash, puesto que no trabajamos con etiquetas HTML, así que tendremos que utilizar una herramienta que sea capaz de comunicar ambas tecnologías: Flash y lightbox. La respuesta es rápida, la solución es : Javascript.
Para realizar esto, tendremos que usar una sencilla función javascript que SI podemos llamar a través de flash (por medio de la función getURL)
La función JS es esta:
<script type="text/javascript">
function LightboxDelegate(url,caption) {
var objLink = document.createElement('a');
objLink.setAttribute('rel','lightbox');
objLink.setAttribute('title',caption);
Lightbox.prototype.start(objLink);
}
</script>
Esta función debe ir declarada en el fichero que contenga el swf (archivo de flash).
El siguiente paso es ahora en la película flash. En el botón mediante el cual queremos activar lightbox, tendremos que poner el siguiente código.
on (release){
getURL("javascript:LightboxDelegate('img/img1.jpg','caption1′)")
}
Explicamos ahora cada una de las funciones para que nos entendamos.
Vamos por orden y comenzamos desde la función de flash. Esta función se ejecutará en el evento "release", es decir, cuando pulsamos el botón en cuestión. Se ejecuta la función getURL, que tiene la peculiaridad de poder llamar funciones javascript desde dentro. En este caso llamamos a la función "LightboxDelegate" y le pasamos como dos únicos parámetros la ruta de la imagen que queremos ver en el efecto lightbox y el 'caption' o subtítulo que aparecerá en el pie de página de foto de lightbox.
Ahora llega la parte más importante. La función LightboxDelegate recibe dos parámetros que le hemos pasado desde la película flash. La imagen y el título que aparecerá a pie de foto. Esta función lo primero que hace es crear dinámicamente un objeto HTML con la función 'createElement'. Este objeto se llamará en nuestra función 'objLink'. En concreto una etiqueta ancla '<a>'. Posteriormente establecemos, también dinámicamente los dos atributos necesarios con la función 'setAttribute' sobre el nuevo objeto creado: "rel" y "title" y por último con 'LightboxPrototypeStart(objLink), lo que hacemos es aplicar LIGHTBOX sobre el objeto que le pasamos como parámetro, y ya está.
Espero que la info os cunda, para cualquier duda, por aquí estamos.
Maria dijo
Gracias, excelente me ayudo muchisisisismo, muchas gracias.
23 Julio 2009 | 01:09 PM