Oscurecer página con ThickBox y LightWindow desde Flash
En este ejemplo veremos cómo llamar a LightWindow y Thickbox desde Flash. Thickbox y LightWindow son unas librerías de JavaScript que nos permite crear el efecto de oscurecer la página y mostrar una foto, otra página, información, etc. encima de lo demás. A este tipo de efecto se les conoce como "Modal Window"y se refieren a un tipo de ventana secundaria la cual obliga al usuario a realizar una acción antes de poder trabajar con la ventana principal. Actualmente existen muchas versiones y tipos de estas ventanas; algunas de ellas son LigthBox, Control.Modal, TinyBox, iBox, etc.
El resultado final así como los archivos de los ejercicios los encontrarás al final de esta entrada.
Flash
En este ejemplo haremos una galería de fotos en Flash y cada una de las fotos las mostraremos (en un tamaño mayor con respecto a las del documento de Flash) llamando a una función de JavaScript, la cual a su vez llamará a la función tb_show de ThickBox o activateWindow de LightWindow. Lo único que deberás hacer en Flash es realizar una simple llamada a una función de JavaScript, la cual llamaremos muestraImagen. El archivo de Flash es el mismo tanto para el ejemplo de ThickBox como el ejemplo de LightWindow. Lo único que cambiará es el documento HTML que los contiene.
A continuación pegaré todo el código del documento de Flash, no lo explicaré ya que es el mismo que utilicé en el post de Scroll de imágenes en Flash.
-
var velocidad:Number = 10;
-
-
derecha_btn.onRollOver = function() {
-
_root.onEnterFrame = function() {
-
if(fotos_mc._x> -100.9) {
-
fotos_mc._x -= velocidad;
-
}
-
}
-
}
-
-
derecha_btn.onRollOut = function() {
-
delete _root.onEnterFrame;
-
}
-
-
izquierda_btn.onRollOver = function() {
-
_root.onEnterFrame = function() {
-
if(fotos_mc._x <944.9) {
-
fotos_mc._x += velocidad;
-
}
-
}
-
}
-
-
izquierda_btn.onRollOut = function() {
-
delete _root.onEnterFrame;
-
}
-
-
/* Código de las fotos */
-
fotos_mc.foto1.onRelease = function() { getURL("javascript:muestraImagen('foto1.jpg', 'Descripción Foto #1');"); }
-
fotos_mc.foto2.onRelease = function() { getURL("javascript:muestraImagen('foto2.jpg', 'Descripción Foto #2');"); }
-
fotos_mc.foto3.onRelease = function() { getURL("javascript:muestraImagen('foto3.jpg', 'Descripción Foto #3');"); }
-
fotos_mc.foto4.onRelease = function() { getURL("javascript:muestraImagen('foto4.jpg', 'Descripción Foto #4');"); }
-
fotos_mc.foto5.onRelease = function() { getURL("javascript:muestraImagen('foto5.jpg', 'Descripción Foto #5');"); }
-
fotos_mc.foto6.onRelease = function() { getURL("javascript:muestraImagen('foto6.jpg', 'Descripción Foto #6');"); }
-
fotos_mc.foto7.onRelease = function() { getURL("javascript:muestraImagen('foto7.jpg', 'Descripción Foto #7');"); }
Lo importante de este código y en lo que te debes de fijar es en el código de los botones. Nuestra galería está formada por siete imágenes, cada una de estás imágenes es un MovieClip cuyos nombres de instancia van de foto1 a foto7. Estas fotos a su vez están dentro de un MovieClip con nombre de instancia fotos_mc.
Cada uno de los MovieClips que contienen las fotos llaman a la función en JavaScript muestraImagen, pasándole como parámetro el nombre de la imagen y su descripción.
ThickBox
El código de esta librería lo puedes bajar de aquí. Su característica principal es que está desarrollada sobre la librería jQuery, por lo que si estás realizando una aplicación con jQuery, no tendrás que importar tantos archivos *.js. Debido a lo anterior, deberás tener este archivo (jquery.js) antes de poder usar el ThickBox (no te preocupes, ese archivo lo puedes bajar de la misma página del ThickBox). Para poder hacer uso de las funciones del ThickBox y obtener los efectos deberás importar el archivo thickbox.js y thickbox.css a tu archivo HTML. Estos archivos solamente agregan 15kb a la librería jquery.js, por lo que no te preocupes de los tiempos de descarga que tedrá tu página.
-
<!-- CSS -->
-
<link rel="stylesheet" href="js/thickbox/thickbox.css" type="text/css" media="screen" />
-
-
<!-- JavaScript -->
-
<script type="text/javascript" src="js/swfobject.js"></script>
-
<script type="text/javascript" src="js/thickbox/jquery.js"></script>
-
<script type="text/javascript" src="js/thickbox/thickbox.js"></script>
Recuerda que las líneas del código anterior deberán ir entre los tags <head> y </head>. Además, dentro de estos tags deberá estar el código de nuestra función de JavaScript que se encarga de hacer la llamada a tb_show:
-
<script language="javascript">
-
function muestraImagen(imagen, descripcion)
-
{
-
tb_show(descripcion, "fotos/" + imagen);
-
}
-
</script>
Nuestra función muestraImagen recibe dos parámetros:
- imagen: es la liga de la imagen o página que queremos mostrar; en nuestro caso las fotos se llaman foto1s.jpg, foto2s.jpg, etc. y se encuentran dentro del directorio fotos
- descripcion: información de cada una de las fotos la cual se mostrará en nuestra ventana modal.
El código junto quedaría de la siguiente manera:
-
...
-
<!-- CSS -->
-
<link rel="stylesheet" href="js/thickbox/thickbox.css" type="text/css" media="screen" />
-
-
<!-- JavaScript -->
-
<script type="text/javascript" src="js/swfobject.js"></script>
-
<script type="text/javascript" src="js/thickbox/jquery.js"></script>
-
<script type="text/javascript" src="js/thickbox/thickbox.js"></script>
-
-
<script language="javascript">
-
function muestraImagen(imagen, descripcion)
-
{
-
tb_show(descripcion, "fotos/" + imagen);
-
}
-
</script>
-
...
-
</head>
Ahora nada mas nos falta embeber el archivo SWF dentro de nuestro HTML.
Para que la ventana secundaria se muestre arriba del documento de Flash, deberás ponerle el parámetro wmode como transparent:
-
<param name="wmode" value="transparent" />
Para evitar que tu documento se vea transparente no olvides ponerle un fondo a tu Flash.
La hoja de estilos del ThickBox (thickbox.css) nos permite personalizar nuestra ventana secundaria de forma rápida y sencilla, y sin la necesidad de meternos en el código de JavaScript; por lo que si deseas cambiar los colores, el tamaño de las fuentes, etc. deberás modificar este archivo. Ten en cuenta que no es necesario que tu página "se oscurezca" con un fondo negro, puedes cambiarlo a un fondo azul, verde, rojo, etc.
LightWindow
El código de esta librería lo puedes bajar de aquí. A diferencia del ThickBox, LightWindow requiere de la librería Prototype, Scriptaculous y de la librería Effects.
Al igual que el ThickBox, LightWindow incluye una hoja de estilos (lightwindow.css) que nos permite personalizar nuestra ventana secundaria de forma rápida y sencilla, sin la necesidad de meternos en el código de JavaScript.
Los archivos JavaScript y Hojas de estilos que debes incluir en tu archivo HTML son los siguientes:
-
<!-- CSS -->
-
<link rel="stylesheet" type="text/css" href="js/lightwindow/css/default.css" />
-
<link rel="stylesheet" type="text/css" href="js/lightwindow/css/lightwindow.css" />
-
-
<!-- JavaScript -->
-
<script type="text/javascript" src="js/swfobject.js"></script>
-
<script type="text/javascript" src="js/lightwindow/javascript/prototype.js"></script>
-
<script type="text/javascript" src="js/lightwindow/javascript/effects.js"></script>
-
<script type="text/javascript" src="js/lightwindow/javascript/lightwindow.js"></script>
Y, por supuesto, deberemos incluir el código de nuestra función muestraImagen:
-
<script language="javascript">
-
function muestraImagen(imagen, titulo, descripcion, autor)
-
{
-
myLightWindow.activateWindow({href: 'fotos/' + imagen, title: '2008 Acapulco, México', caption: titulo, author: 'Carla Macías'});
-
}
-
</script>
En esta ocasión, nuestra función tendrá cuatro parámetros:
- imagen: es la liga de la imagen o página que queremos mostrar; en nuestro caso las fotos se llaman foto1s.jpg, foto2s.jpg, etc. y se encuentran dentro del directorio fotos
- titulo: un texto alusivo a la imagen que estamos mostrando
- descripcion: información de cada una de las fotos la cual se mostrará en nuestra ventana modal.
- autor: autor o dueño de la imagen, página, etc. Esta información es opcional, solamente la mostramos para que veas el diseño de esta parte
Al final, nuestro código quedará de la siguiente manera:
-
...
-
<!-- CSS -->
-
<link rel="stylesheet" type="text/css" href="js/lightwindow/css/default.css" />
-
<link rel="stylesheet" type="text/css" href="js/lightwindow/css/lightwindow.css" />
-
-
<!-- JavaScript -->
-
<script type="text/javascript" src="js/swfobject.js"></script>
-
<script type="text/javascript" src="js/lightwindow/javascript/prototype.js"></script>
-
<script type="text/javascript" src="js/lightwindow/javascript/effects.js"></script>
-
<script type="text/javascript" src="js/lightwindow/javascript/lightwindow.js"></script>
-
-
<script language="javascript">
-
function muestraImagen(imagen, titulo, descripcion, autor)
-
{
-
myLightWindow.activateWindow({href: 'fotos/' + imagen, title: '2008 Acapulco, México', caption: titulo, author: 'Carla Macías'});
-
}
-
</script>
-
...
-
</head>
Hemos llegado al final del tutorial, espero te haya gustado y no dudes en dejar comentario.
A continuación, están las ligas para cada uno de los ejemplos y para bajar los archivos del ejercicio.
Si te gustó esta entrada anímate a escribir un comentario o suscribirte al feed y obtener los artículos futuros en tu lector de feeds.
Comentarios
muy bueno el tuto, lo chequee en el opera y funciona bien en el safari tambien en el explorer todavia no pude pero en el mozila no funciona? o sera mi version de mozila es la version 3
muchas gracias gran aporte!!1
Muchas gracias Carla.
Hace un poco lo acababa de solucionar invocando directamente a LightWindow desde flash:
foto1.onRelease = function() {
getURL("javascript: myLightWindow.activateWindow({href: 'prueba.swf', title: '', params: 'lightwindow_type=media,lightwindow_width=760,lightwindow_height=385' });");
}
Me quedo con tu solución y muchas gracias de nuevo. Interesante site, te acabo de agregar al Reader.
Saludos desde Madrid (España)
Hola Lux,
Es posible usando el LightWindow. Lo que tendrás que hacer es especificar el tamaño del SWF dentro de la función de JavaScript (desconozco por qué no determina el tamaño de forma automática). Si todos tus SWFs tienen el mismo tamaño:
-
function muestraImagen(archivo, titulo, descripcion, autor)
-
{
-
myLightWindow.activateWindow({href: 'fotos/' + archivo, title: '2008 Acapulco, México', caption: titulo, author: autor, width: 600, height: 300});
-
}
Si tienen distintos tamaños puedes pasar estos valores desde el archivo de Flash a la función de JavaScript.
-
function muestraImagen(archivo, titulo, descripcion, autor, ancho, largo)
-
{
-
myLightWindow.activateWindow({href: 'fotos/' + archivo, title: '2008 Acapulco, México', caption: titulo, author: autor, width: ancho, height: largo});
-
}
-
fotos_mc.foto1.onRelease = function() {
-
getURL("javascript:muestraImagen('foto7.jpg', 'Título', 'Descripción Foto #7', 'Código Metrópoli', '600', '300');");
-
}
Saludos.
Excelente post, muy útil. Solo una duda, es posible que en vez de jpgs, se carguen un swfs en la ventana modal. Creo que tiene algo que ver con el parámetro type: media, pero no doy con ello.
Gracias.
Escribe un comentario
Nota: Es posible que tu comentario requiera autorización, si es así tu comentario será publicado a la brevedad. Gracias.











Hola Alejandro,
Mi versión de Mozilla Firefox es la 3.0.1 y no tengo ningún problema. ¿No te funciona en local o en las ligas de las demos que están en este tutorial?
Saludos.