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
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.
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)
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
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.
hola que tal espero puedan responderme 
he implementado este codigo en mi pagina pero el problema es que en vez de imagenes necesitos abrir uRLs lo logre hacer y tambien que en firefox si sirve pero en IE me marca error
que puede ser ayudenme por favor
les dejo el codigo del flash
getURL("javascript: myLightWindow.activateWindow({href: 'contacto/index.html', title: 'Contactanos', params: 'lightwindow_type=media,lightwindow_width=730,lightwindow_height=260' });");
Hola Juan Carlos,
¿Qué error te aparece en Windows? ¿Tendrás la liga a tu página para verlo?
Saludos.
si mira te paso la liga de la pagina web
http://www.kindergabilondosoler.edu.mx
espero me puedas ayudar
o si me puedes dar tu msn para agregarte a ver si me puedes ayudar con este error
de antemano gracias
el codigo donde lo tengo puesto es en el apartado de instalaciones,galeria, el problemas es que en IE no sirve espero me puedan ayudar.
gracias
Hola Juan Carlos,
Muestrame el código de tu botón de Instalaciones. Para mostrarlo aquí ponlo entre los tags [ as] y [ /as] (sin los espacios después de los [).
Saludos.
este es el codigo
-
getURL("javascript: myLightWindow.activateWindow({href: 'instalaciones/index.php', title: '', params: 'lightwindow_type=media,lightwindow_width=800,lightwindow_height=600' });");
Hola Walter,
Tanto ThickBox como LightWindow son librerías hechas en JavaScript y su diseño puede ser modificado con hojas de estilo (CSS). En este tutorial solamente muestro cómo se puede invocar la ventana modal por medio de Flash.
Para hacerlo desde tu HTML debes usar el mismo código que usamos en el archivo de Flash:
-
javascript: myLightWindow.activateWindow({href: 'instalaciones/index.php', title: '', params: 'lightwindow_type=media,lightwindow_width=800,lightwindow_height=600' });
Saludos.
Muy bueno el tutorial, pero sigo teniendo una duda, a ver si me podeis ayudar.
¿Cómo podemos hacer para que en vez de una sola imagen se cree una galería en lightwindow?
Desde html muy fácil, ponemos los links con el mismo atributo rel, por ejemplo:
y funciona, pero desde flash llamamos a activateWindow pasando un atributo rel de galeria (es decir, Gallery-Name[Category-Name]), y como no existen más links en la web con el mismo rel, no puede crear la galería, y peta.
No se si me he explicado bien...
Un saludo.
perdon por el mensaje de antes, que he puesto links en HTML y no le han gustado, me referia a:
a href=img1 ... rel=viaje[bruselas] ... fin_a
a href=img2 ... rel=viaje[bruselas] ... fin_a
a href=img3 ... rel=viaje[bruselas] ... fin_a
Hola Walter,
Un ejemplo sencillo sería insertar en un HTML una imagen thumbnail o miniatura, y mostrar la imagen en grande por medio de LightWindow.
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
<html xmlns="http://www.w3.org/1999/xhtml">
-
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
-
<title>Usando LightWindow</title>
-
<!-- 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/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)
-
{
-
myLightWindow.activateWindow({href: imagen});
-
}
-
</script>
-
</head>
-
-
</body>
-
</html>
Saludos.
Hola BBB,
No entendí la forma que propones para hacer la galería, pero con LightWindow puedes cargar páginas HTML, PHP, etc. y no sólo imágenes. Una forma que podrías implementar es crear un HTML con botones de "anterior" y "siguiente" imagen y llamar ese HTML con el activateWindow; o bien, podrías hacer una página en PHP y llamar las fotos de una base de datos, por ejemplo.
Saludos.
Hola Carla quiero hacerte algunas consultas si me podrias ayudar con esta galería, porque estoy intentando de todas formas pero no me sale, me salio toda las otras cosas como poner la imagen en el medio y todo eso, pero mi problema es la parte de carousel como puedo configurarlo por que quiero ponerle las medidas, seria que tenga una medida deteminada no ha las fotos en si, sino el largor del carousel.
Hola Walter,
La tira de imágenes tendrías que hacerla en Flash. Pare eso puedes visitar este tutorial en donde explico cómo hacer paso a paso el scroll y cómo determinar las coordenadas límite del scroll.
Saludos.
Hola Walter,
Esas opciones, o más bien el área para mostrar esa información, ya la tiene contemplada el LightWindow.
Para tu ejemplo podrías hacer lo siguiente:
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
<html xmlns="http://www.w3.org/1999/xhtml">
-
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
-
<title>Usando LightWindow</title>
-
<!-- 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/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, desc)
-
{
-
myLightWindow.activateWindow({href: 'gallery/full' + imagen, title: titulo, caption: desc, author: 'Carla Macías'});
-
}
-
</script>
-
</head>
-
</body>
-
</html>
Saludos.
Una consulta, cuando se ocurrese la pagina y aparece un cuadro con la imagen esa mis se puede seleccionar un sector y cuando pasas con el mouse haga un zomm.
Esto es lo que estoy usando, y funciona bien, pero quiero colocar zoom a una foto especifica y un lugar especifico.
Fundación Schwarz
window.addEvent('domready', function(){
/* thumbnails example */
new SlideItMoo({itemsVisible:3, // the number of thumbnails that are visible
currentElement: 0, // the current element. starts from 0. If you want to start the display with a specific thumbnail, change this
thumbsContainer: 'thumbs',
elementScrolled: 'thumb_container',
overallContainer: 'gallery_container'});
});
A.applink:hover {border: 3px dotted #DCE6F4;padding:2px;background-color:#9999;color:green;text-decoration:none}
A.applink {border: 3px dotted #DCE6F4;padding:2px;color:#2F5BFF;background:transparent;text-decoration:none}
A.info {color:#2F5BFF;background:transparent;text-decoration:none}
A.info:hover {color:green;background:transparent;text-decoration:underline}
TEXTO PLANO
HTML:
01. Fundación Schwarz
02.
03.
04.
05.
06. window.addEvent('domready', function(){
07. /* thumbnails example */
08. new SlideItMoo({itemsVisible:3, // the number of thumbnails that are visible
09. currentElement: 0, 18. // the current element. starts from 0. If you want to start the display with a specific thumbnail, change this
10. thumbsContainer: 'thumbs',
11. elementScrolled: 'thumb_container',
12. overallContainer: 'gallery_container'});
13. });
14.
15.
16. A.applink:hover {border: 3px dotted #DCE6F4;padding:2px;background-color:#9999;color:green;text-decoration:none}
17. A.applink {border: 3px dotted #DCE6F4;padding:2px;color:#2F5BFF;background:transparent;text-decoration:none}
18. A.info {color:#2F5BFF;background:transparent;text-decoration:none} A.info:hover {color:green;background:transparent;text-decoration:underline}
19.
20.
Hola Walter,
Para pegar código HTML en tu comentario ponlo entre los tags [ html] y [ /html] (quitando los espacios después del corchete [).
Para el efeto de zoom tendrías que buscar algún código en JavaScript que lo haga; el Magic Zoom es muy padre pero lamentablemente no es gratuito. Igual se me ocurre que si son zonas ya predeterminadas de tu imagen, le hagas un map a esa imagen y dependiendo de la zona muestres en un div el pedazo de esa imagen en grande.
Saludos.
Muchisimas gracias por el comentario, pero queria saber mas sobre maps como puedo colocar el map en la foto ejemplo:
Si lo quiero colocar al maps en la primer foto que tengo en el escrito, porque la otras es un thumb una miniatura que muestro en el scroll o carousel.
Me podrias ayudar, no tiendo mucho de este tema, te pido mil disculpas por las molestias ocacionadas.
-
[<a href="gallery/full/00.jpg" title="Casa paterna, donde naciera la Dra. Schwarz - Buenos Aires 1915" rel="nofollow"></a>]
-
<a href="gallery/full/00.jpg" title="Casa paterna, donde naciera la Dra. Schwarz - Buenos Aires 1915" rel="nofollow"></a>
Hola Walter,
Un Map en HTML te permite ponerle "enlaces" a ciertas zonas de una imagen, esto lo hace definiendo las zonas mediante coordenadas de la imagen. La forma más sencilla de ponerle un Map a una foto es utilizando Dreamweaver, sólo tienes que insertar la imagen, seleccionar la imagen en la vista de Diseño y dentro del panel de propiedades (que se encuentra hasta abajo) hay un cuadrado, un círculo y otra figura; los cuales te permitirán definir las zonas de tu imagen.
Una vez definidas las zonas, podrás mandar a llamar a una función de JavaScript con onmouseover y onmouseout.
Debo aclarar que usando Maps ya no te servidrá mostrar tu imagen por medio de LightWindow, si no que ahora deberás mostrar el HTML con la imagen, el map y el código HTML por medio de LightWindow.
Saludos.
Excelente articulo.
Tengo un problema con ie que muchos parecen tener pero no encuentro la respuesta, es el siguiente.
Al abrir lightbox la imagen en FF la redimenssiona bien pero en IE la deforma, igual que a veces simplemente la muestra del tamaño de 20x20 pixels mas o menos.
Estos fallos sólo son en IE y son aleatorios, no siempre pasa.
¿podriais ayudarme?
Gracias por adlentado
Simon
Hola Simón,
Lo más fácil sería que le especificaras el tamaño de cada imagen (si es que son de distinto tamaño) o bien un tamaño por default.
-
function muestraImagen(archivo, titulo, descripcion, autor)
-
{
-
myLightWindow.activateWindow({href: 'fotos/' + archivo, title: '2008 Acapulco, México', caption: titulo, author: autor, width: 600, height: 300});
-
}
Saludos.
Hola carla necesitaria tu ayuda estoy haciendo la galeria con slimbox pero solo funciona con firefox y con IE no me funciona me podrias ayudar, o si queres podes fijarte en la pagina donde estoy haciendolo, como no se manejarlo, otra pregunta se puede pasar de slimbox a lightwindows.
Me quedo bien pero no se porque no funciona en IE, pero lo otro que me preocupa es que no se como pasar a ligthwindows.
como el slimbox no te permite abrir ni flash ni los maps, asi que no tengo ni idea se me rompe el coco.
Porque mi idea poner el scroll como esta en la pagina que te pase pero quiero pasar de slimbox a lightwindows
Hola Walter,
Lo que no funciona en IE es el scroll (se muestran todas las imágenes).
Si quieres cambiar el SlimBox por el LightWindow sigue este tutorial, está fácil de implementar. Además, te recomiendo que hagas el Scroll con Flash, para que te evites el problema de las distintas versiones de navegadores.
Saludos.
Carla soy nuevo en esto y quiero hacer este tuto, pero para un preloader para flash me refiero que oscuresca la pagina mientras carga toda la animacion y se active estando todo completo. grax
Hola rouli,
¿Qué mostrarías mientras se carga la página (está obscura la pantalla)? No me queda muy claro, supongo que tendrías un archivo de Flash con el preloader y la información; es posible que mientras está el preoloader ejecutes la llamada para oscurecer la pantalla y cuando acabó el preloader ejecutes otra llamada para quitar la ventana modal, pero todo eso estaría en un SWF incrustado en la página principal (es decir, debajo de la ventana modal) ¿no?
Además habría que modificar el archivo de JavaScript para que el usuario no pueda quitar la ventana modal al hacer click sobre ella.
Saludos.
Carla, exactamente tengo un swf incrustado en la pagina principal, eso quedaría bajo la ventana modal.
Entonces sería como lo mencionas, mientras está el preoloader ejecutar la llamada para oscurecer la pantalla y cuando acabó el preloader ejecutar otra llamada para quitar la ventana modal.
y con respecto al javascript también debe ser como lo mencionas para que el usuario no pueda quitar la ventana hasta que termine la carga.Espero puedas ayudarme con este rollo gracias.
Hola rouli,
El código JavaScript del archivo lightwindow.js quedaría así.
Te recomiendo que comprimas el código para reducir su tamaño [63KB], una página muy buena para hacerlo es Code and Coffee.
El archivo lightwindow.js comprimido [45KB] quedaría así (Haz click en la franja donde dice Texto Plano para poder copiarlo):
-
/* lightwindow.js v2.0 Copyright (c) 2007 stickmanlabs Author: Kevin P Miller | http://www.stickmanlabs.com */
-
if(typeof Effect=='undefined')throw("lightwindow.js requires including script.aculo.us' effects.js library!");try{document.execCommand("BackgroundImageCache",false,true);}catch(e){}var lightwindow=Class.create();lightwindow.prototype={element:null,contentToFetch:null,windowActive:false,dataEffects:[],dimensions:{cruft:null,container:null,viewport:{height:null,width:null,offsetTop:null,offsetLeft:null}},pagePosition:{x:0,y:0},pageDimensions:{width:null,height:null},preloadImage:[],preloadedImage:[],galleries:[],resizeTo:{height:null,heightPercent:null,width:null,widthPercent:null,fixedTop:null,fixedLeft:null},scrollbarOffset:18,navigationObservers:{previous:null,next:null},containerChange:{height:0,width:0},activeGallery:false,galleryLocation:{current:0,total:0},initialize:function(options){this.options=Object.extend({resizeSpeed:8,contentOffset:{height:20,width:20},dimensions:{image:{height:250,width:250},page:{height:250,width:250},inline:{height:250,width:250},media:{height:250,width:250},external:{height:250,width:250},titleHeight:25},classNames:{standard:'lightwindow',action:'lightwindow_action'},fileTypes:{page:['asp','aspx','cgi','cfm','htm','html','pl','php4','php3','php','php5','phtml','rhtml','shtml','txt','vbs','rb'],media:['aif','aiff','asf','avi','divx','m1v','m2a','m2v','m3u','mid','midi','mov','moov','movie','mp2','mp3','mpa','mpa','mpe','mpeg','mpg','mpg','mpga','pps','qt','rm','ram','swf','viv','vivo','wav'],image:['bmp','gif','jpg','png','tiff']},mimeTypes:{avi:'video/avi',aif:'audio/aiff',aiff:'audio/aiff',gif:'image/gif',bmp:'image/bmp',jpeg:'image/jpeg',m1v:'video/mpeg',m2a:'audio/mpeg',m2v:'video/mpeg',m3u:'audio/x-mpequrl',mid:'audio/x-midi',midi:'audio/x-midi',mjpg:'video/x-motion-jpeg',moov:'video/quicktime',mov:'video/quicktime',movie:'video/x-sgi-movie',mp2:'audio/mpeg',mp3:'audio/mpeg3',mpa:'audio/mpeg',mpa:'video/mpeg',mpe:'video/mpeg',mpeg:'video/mpeg',mpg:'audio/mpeg',mpg:'video/mpeg',mpga:'audio/mpeg',pdf:'application/pdf',png:'image/png',pps:'application/mspowerpoint',qt:'video/quicktime',ram:'audio/x-pn-realaudio-plugin',rm:'application/vnd.rn-realmedia',swf:'application/x-shockwave-flash',tiff:'image/tiff',viv:'video/vivo',vivo:'video/vivo',wav:'audio/wav',wmv:'application/x-mplayer2'},classids:{mov:'clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B',swf:'clsid:D27CDB6E-AE6D-11cf-96B8-444553540000',wmv:'clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6'},codebases:{mov:'http://www.apple.com/qtactivex/qtplugin.cab#version=6,0,2,0',swf:'http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0',wmv:'http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,5,715'},viewportPadding:10,EOLASFix:'swf,wmv,fla,flv',overlay:{opacity:0.7,image:'js/lightwindow/images/black.png',presetImage:'js/lightwindow/images/black-70.png'},skin:{main:'<div id="lightwindow_container">'+'<div id="lightwindow_title_bar">'+'<div id="lightwindow_title_bar_inner">'+'<span id="lightwindow_title_bar_title"></span>'+'</div>'+'</div>'+'<div id="lightwindow_stage">'+'<div id="lightwindow_contents">'+'</div>'+'<div id="lightwindow_navigation">'+'<a href="#" id="lightwindow_previous" rel="nofollow">'+'<span id="lightwindow_previous_title"></span>'+'</a>'+'<a href="#" id="lightwindow_next" rel="nofollow">'+'<span id="lightwindow_next_title"></span>'+'</a>'+'<iframe name="lightwindow_navigation_shim" id="lightwindow_navigation_shim" src="javascript:false;" frameBorder="0" scrolling="no"></iframe>'+'</div>'+'<div id="lightwindow_galleries">'+'<div id="lightwindow_galleries_tab_container">'+'<a href="#" id="lightwindow_galleries_tab" rel="nofollow">'+'<span id="lightwindow_galleries_tab_span" class="up">Galleries</span>'+'</a>'+'</div>'+'<div id="lightwindow_galleries_list">'+'</div>'+'</div>'+'</div>'+'<div id="lightwindow_data_slide">'+'<div id="lightwindow_data_slide_inner">'+'<div id="lightwindow_data_details">'+'<div id="lightwindow_data_gallery_container">'+'<span id="lightwindow_data_gallery_current"></span>'+' of '+'<span id="lightwindow_data_gallery_total"></span>'+'</div>'+'<div id="lightwindow_data_author_container">'+'por <span id="lightwindow_data_author"></span>'+'</div>'+'</div>'+'<div id="lightwindow_data_caption">'+'</div>'+'</div>'+'</div>'+'</div>',loading:'<div id="lightwindow_loading">'+'<img src="js/lightwindow/images/ajax-loading.gif" alt="loading" />'+'<span>Cargando </span>'+'<iframe name="lightwindow_loading_shim" id="lightwindow_loading_shim" src="javascript:false;" frameBorder="0" scrolling="no"></iframe>'+'</div>',iframe:'<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">'+'<html xmlns="http://www.w3.org/1999/xhtml">'+'<body>'+'{body_replace}'+'</body>'+'</html>',gallery:{top:'<div class="lightwindow_galleries_list">'+'<h1>{gallery_title_replace}</h1>'+'<ul>',middle:'<li>'+'{gallery_link_replace}'+'</li>',bottom:'</ul>'+'</div>'}},formMethod:'get',hideFlash:false,hideGalleryTab:false,showTitleBar:true,animationHandler:false,navigationHandler:false,transitionHandler:false,finalAnimationHandler:false,formHandler:false,galleryAnimationHandler:false,showGalleryCount:true},options||{});this.duration=((11-this.options.resizeSpeed)*0.15);this._setupLinks();this._getScroll();this._getPageDimensions();this._browserDimensions();this._addLightWindowMarkup(false);this._setupDimensions();this.buildGalleryList();},activate:function(e,link){this._clearWindowContents(true);this._addLoadingWindowMarkup();this._setupWindowElements(link);this._getScroll();this._browserDimensions();this._setupDimensions();this._toggleTroubleElements('hidden',false);this._displayLightWindow('block','hidden');this._setStatus(true);this._monitorKeyboard(false);this._prepareIE(true);this._loadWindow();},deactivate:function(){this.windowActive=false;this.activeGallery=false;if(!this.options.hideGalleryTab){this._handleGalleryAnimation(false);}this.animating=false;this.element=null;this._displayLightWindow('none','visible');this._clearWindowContents(false);var queue=Effect.Queues.get('lightwindowAnimation').each(function(e){e.cancel();});this._prepareIE(false);this._setupDimensions();this._toggleTroubleElements('visible',false);this._monitorKeyboard(false);},createWindow:function(element,attributes){this._processLink($(element));},activateWindow:function(options){this.element=Object.extend({href:null,title:null,author:null,caption:null,rel:null,top:null,left:null,type:null,showImages:null,height:null,width:null,loadingAnimation:null,iframeEmbed:null,form:null},options||{});this.contentToFetch=this.element.href;this.windowType=this.element.type?this.element.type:this._fileType(this.element.href);this._clearWindowContents(true);this._addLoadingWindowMarkup();this._getScroll();this._browserDimensions();this._setupDimensions();this._toggleTroubleElements('hidden',false);this._displayLightWindow('block','hidden');this._setStatus(true);this._monitorKeyboard(false);this._prepareIE(true);this._loadWindow();},submitForm:function(e){if(this.options.formHandler){this.options.formHandler(e);}else{this._defaultFormHandler(e);}},openWindow:function(element){var element=$(element);this.windowActive=true;this._clearWindowContents(true);this._addLoadingWindowMarkup();this._setupWindowElements(element);this._setStatus(true);this._handleTransition();},navigateWindow:function(direction){this._handleNavigation(false);if(direction=='previous'){this.openWindow(this.navigationObservers.previous);}else if(direction=='next'){this.openWindow(this.navigationObservers.next);}},buildGalleryList:function(){var output='';var galleryLink;for(i in this.galleries){if(typeof this.galleries[i]=='object'){output+=(this.options.skin.gallery.top).replace('{gallery_title_replace}',unescape(i));for(j in this.galleries[i]){if(typeof this.galleries[i][j]=='object'){galleryLink='<a href="#" id="lightwindow_gallery_'+i+'_'+j+'" rel="nofollow">'+unescape(j)+'</a>';output+=(this.options.skin.gallery.middle).replace('{gallery_link_replace}',galleryLink);}}output+=this.options.skin.gallery.bottom;}}new Insertion.Top('lightwindow_galleries_list',output);for(i in this.galleries){if(typeof this.galleries[i]=='object'){for(j in this.galleries[i]){if(typeof this.galleries[i][j]=='object'){Event.observe($('lightwindow_gallery_'+i+'_'+j),'click',this.openWindow.bind(this,this.galleries[i][j][0]),false);$('lightwindow_gallery_'+i+'_'+j).onclick=function(){return false;};}}}}},_setupLinks:function(){var links=$$('.'+this.options.classNames.standard);links.each(function(link){this._processLink(link);}.bind(this));},_processLink:function(link){if((this._fileType(link.getAttribute('href'))=='image'||this._fileType(link.getAttribute('href'))=='media')){if(gallery=this._getGalleryInfo(link.rel)){if(!this.galleries[gallery[0]]){this.galleries[gallery[0]]=new Array();}if(!this.galleries[gallery[0]][gallery[1]]){this.galleries[gallery[0]][gallery[1]]=new Array();}this.galleries[gallery[0]][gallery[1]].push(link);}}var url=link.getAttribute('href');if(url.indexOf('?')>-1){url=url.substring(0,url.indexOf('?'));}var container=url.substring(url.indexOf('#')+1);if($(container)){$(container).setStyle({display:'none'});}},_setupActions:function(){var links=$$('#lightwindow_container .'+this.options.classNames.action);links.each(function(link){Event.observe(link,'click',this[link.getAttribute('rel')].bindAsEventListener(this,link),false);link.onclick=function(){return false;};}.bind(this));},_addLightWindowMarkup:function(rebuild){var overlay=Element.extend(document.createElement('div'));overlay.setAttribute('id','lightwindow_overlay');if(Prototype.Browser.Gecko){overlay.setStyle({backgroundImage:'url('+this.options.overlay.presetImage+')',backgroundRepeat:'repeat',height:this.pageDimensions.height+'px'});}else{overlay.setStyle({opacity:this.options.overlay.opacity,backgroundImage:'url('+this.options.overlay.image+')',backgroundRepeat:'repeat',height:this.pageDimensions.height+'px'});}var lw=document.createElement('div');lw.setAttribute('id','lightwindow');lw.innerHTML=this.options.skin.main;var body=document.getElementsByTagName('body')[0];body.appendChild(overlay);body.appendChild(lw);if($('lightwindow_title_bar_close_link')){Event.observe('lightwindow_title_bar_close_link','click',this.deactivate.bindAsEventListener(this));$('lightwindow_title_bar_close_link').onclick=function(){return false;};}Event.observe($('lightwindow_previous'),'click',this.navigateWindow.bind(this,'previous'),false);$('lightwindow_previous').onclick=function(){return false;};Event.observe($('lightwindow_next'),'click',this.navigateWindow.bind(this,'next'),false);$('lightwindow_next').onclick=function(){return false;};if(!this.options.hideGalleryTab){Event.observe($('lightwindow_galleries_tab'),'click',this._handleGalleryAnimation.bind(this,true),false);$('lightwindow_galleries_tab').onclick=function(){return false;};}if(Prototype.Browser.IE){Event.observe(document,'mousewheel',this._stopScrolling.bindAsEventListener(this),false);}else{Event.observe(window,'DOMMouseScroll',this._stopScrolling.bindAsEventListener(this),false);}},_addLoadingWindowMarkup:function(){$('lightwindow_contents').innerHTML+=this.options.skin.loading;},_setupWindowElements:function(link){this.element=link;this.element.title=null?'':link.getAttribute('title');this.element.author=null?'':link.getAttribute('author');this.element.caption=null?'':link.getAttribute('caption');this.element.rel=null?'':link.getAttribute('rel');this.element.params=null?'':link.getAttribute('params');this.contentToFetch=this.element.href;this.windowType=this._getParameter('lightwindow_type')?this._getParameter('lightwindow_type'):this._fileType(this.contentToFetch);},_clearWindowContents:function(contents){if($('lightwindow_iframe')){Element.remove($('lightwindow_iframe'));}if($('lightwindow_media_primary')){try{$('lightwindow_media_primary').Stop();}catch(e){}Element.remove($('lightwindow_media_primary'));}if($('lightwindow_media_secondary')){try{$('lightwindow_media_secondary').Stop();}catch(e){}Element.remove($('lightwindow_media_secondary'));}this.activeGallery=false;this._handleNavigation(this.activeGallery);if(contents){$('lightwindow_contents').innerHTML='';$('lightwindow_contents').setStyle({overflow:'hidden'});if(!this.windowActive){$('lightwindow_data_slide_inner').setStyle({display:'none'});$('lightwindow_title_bar_title').innerHTML='';}$('lightwindow_data_slide').setStyle({height:'auto'});}this.resizeTo.height=null;this.resizeTo.width=null;},_setStatus:function(status){this.animating=status;if(status){Element.show('lightwindow_loading');}if(!(/MSIE 6./i.test(navigator.userAgent))){this._fixedWindow(status);}},_fixedWindow:function(status){if(status){if(this.windowActive){this._getScroll();$('lightwindow').setStyle({position:'absolute',top:parseFloat($('lightwindow').getStyle('top'))+this.pagePosition.y+'px',left:parseFloat($('lightwindow').getStyle('left'))+this.pagePosition.x+'px'});}else{$('lightwindow').setStyle({position:'absolute'});}}else{if(this.windowActive){this._getScroll();$('lightwindow').setStyle({position:'fixed',top:parseFloat($('lightwindow').getStyle('top'))-this.pagePosition.y+'px',left:parseFloat($('lightwindow').getStyle('left'))-this.pagePosition.x+'px'});}else{if($('lightwindow_iframe')){this._browserDimensions();}$('lightwindow').setStyle({position:'fixed',top:(parseFloat(this._getParameter('lightwindow_top'))?parseFloat(this._getParameter('lightwindow_top'))+'px':this.dimensions.viewport.height/2+'px'),left:(parseFloat(this._getParameter('lightwindow_left'))?parseFloat(this._getParameter('lightwindow_left'))+'px':this.dimensions.viewport.width/2+'px')});}}},_prepareIE:function(setup){if(Prototype.Browser.IE){var height,overflowX,overflowY;if(setup){var height='100%';}else{var height='auto';}var body=document.getElementsByTagName('body')[0];var html=document.getElementsByTagName('html')[0];html.style.height=body.style.height=height;}},_stopScrolling:function(e){if(this.animating){if(e.preventDefault){e.preventDefault();}e.returnValue=false;}},_getScroll:function(){if(typeof(window.pageYOffset)=='number'){this.pagePosition.x=window.pageXOffset;this.pagePosition.y=window.pageYOffset;}else if(document.body&&(document.body.scrollLeft||document.body.scrollTop)){this.pagePosition.x=document.body.scrollLeft;this.pagePosition.y=document.body.scrollTop;}else if(document.documentElement){this.pagePosition.x=document.documentElement.scrollLeft;this.pagePosition.y=document.documentElement.scrollTop;}},_setScroll:function(x,y){document.documentElement.scrollLeft=x;document.documentElement.scrollTop=y;},_toggleTroubleElements:function(visibility,content){if(content){var selects=$('lightwindow_contents').getElementsByTagName('select');}else{var selects=document.getElementsByTagName('select');}for(var i=0;i<selects.length;i++){selects[i].style.visibility=visibility;}if(!content){if(this.options.hideFlash){var objects=document.getElementsByTagName('object');for(i=0;i!=objects.length;i++){objects[i].style.visibility=visibility;}var embeds=document.getElementsByTagName('embed');for(i=0;i!=embeds.length;i++){embeds[i].style.visibility=visibility;}}var iframes=document.getElementsByTagName('iframe');for(i=0;i!=iframes.length;i++){iframes[i].style.visibility=visibility;}}},_getPageDimensions:function(){var xScroll,yScroll;if(window.innerHeight&&window.scrollMaxY){xScroll=document.body.scrollWidth;yScroll=window.innerHeight+window.scrollMaxY;}else if(document.body.scrollHeight>document.body.offsetHeight){xScroll=document.body.scrollWidth;yScroll=document.body.scrollHeight;}else{xScroll=document.body.offsetWidth;yScroll=document.body.offsetHeight;}var windowWidth,windowHeight;if(self.innerHeight){windowWidth=self.innerWidth;windowHeight=self.innerHeight;}else if(document.documentElement&&document.documentElement.clientHeight){windowWidth=document.documentElement.clientWidth;windowHeight=document.documentElement.clientHeight;}else if(document.body){windowWidth=document.body.clientWidth;windowHeight=document.body.clientHeight;}if(yScroll<windowHeight){this.pageDimensions.height=windowHeight;}else{this.pageDimensions.height=yScroll;}if(xScroll<windowWidth){this.pageDimensions.width=windowWidth;}else{this.pageDimensions.width=xScroll;}},_displayLightWindow:function(display,visibility){$('lightwindow_overlay').style.display=$('lightwindow').style.display=$('lightwindow_container').style.display=display;$('lightwindow_overlay').style.visibility=$('lightwindow').style.visibility=$('lightwindow_container').style.visibility=visibility;},_setupDimensions:function(){var originalHeight,originalWidth;switch(this.windowType){case'page'
riginalHeight=this.options.dimensions.page.height;originalWidth=this.options.dimensions.page.width;break;case'image' riginalHeight=this.options.dimensions.image.height;originalWidth=this.options.dimensions.image.width;break;case'media' riginalHeight=this.options.dimensions.media.height;originalWidth=this.options.dimensions.media.width;break;case'external' riginalHeight=this.options.dimensions.external.height;originalWidth=this.options.dimensions.external.width;break;case'inline' riginalHeight=this.options.dimensions.inline.height;originalWidth=this.options.dimensions.inline.width;break;default:originalHeight=this.options.dimensions.page.height;originalWidth=this.options.dimensions.page.width;break;}var offsetHeight=this._getParameter('lightwindow_top')?parseFloat(this._getParameter('lightwindow_top'))+this.pagePosition.y:this.dimensions.viewport.height/2+this.pagePosition.y;var offsetWidth=this._getParameter('lightwindow_left')?parseFloat(this._getParameter('lightwindow_left'))+this.pagePosition.x:this.dimensions.viewport.width/2+this.pagePosition.x;$('lightwindow').setStyle({top:offsetHeight+'px',left:offsetWidth+'px'});$('lightwindow_container').setStyle({height:originalHeight+'px',width:originalWidth+'px',left:-(originalWidth/2)+'px',top:-(originalHeight/2)+'px'});$('lightwindow_contents').setStyle({height:originalHeight+'px',width:originalWidth+'px'});},_fileType:function(url){var image=new RegExp("[^\.]\.("+this.options.fileTypes.image.join('|')+")\s*$","i");if(image.test(url))return'image';if(url.indexOf('#')>-1&&(document.domain==this._getDomain(url)))return'inline';if(url.indexOf('?')>-1)url=url.substring(0,url.indexOf('?'));var type='unknown';var page=new RegExp("[^\.]\.("+this.options.fileTypes.page.join('|')+")\s*$","i");var media=new RegExp("[^\.]\.("+this.options.fileTypes.media.join('|')+")\s*$","i");if(document.domain!=this._getDomain(url))type='external';if(media.test(url))type='media';if(type=='external'||type=='media')return type;if(page.test(url)||url.substr((url.length-1),url.length)=='/')type='page';return type;},_fileExtension:function(url){if(url.indexOf('?')>-1){url=url.substring(0,url.indexOf('?'));}var extenstion='';for(var x=(url.length-1);x>-1;x--){if(url.charAt(x)=='.'){return extenstion;}extenstion=url.charAt(x)+extenstion;}},_monitorKeyboard:function(status){if(status)document.onkeydown=this._eventKeypress.bind(this);else document.onkeydown='';},_eventKeypress:function(e){if(e==null){var keycode=event.keyCode;}else{var keycode=e.which;}switch(keycode){case 27:this.deactivate();break;case 13:return;default:break;}if(this.animating){return false;}switch(String.fromCharCode(keycode).toLowerCase()){case'p':if(this.navigationObservers.previous){this.navigateWindow('previous');}break;case'n':if(this.navigationObservers.next){this.navigateWindow('next');}break;default:break;}},_getGalleryInfo:function(rel){if(!rel)return false;if(rel.indexOf('[')>-1){return new Array(escape(rel.substring(0,rel.indexOf('['))),escape(rel.substring(rel.indexOf('[')+1,rel.indexOf(']'))));}else{return false;}},_getDomain:function(url){var leadSlashes=url.indexOf('//');var domainStart=leadSlashes+2;var withoutResource=url.substring(domainStart,url.length);var nextSlash=withoutResource.indexOf('/');var domain=withoutResource.substring(0,nextSlash);if(domain.indexOf(':')>-1){var portColon=domain.indexOf(':');domain=domain.substring(0,portColon);}return domain;},_getParameter:function(parameter,parameters){if(!this.element)return false;if(parameter=='lightwindow_top'&&this.element.top){return unescape(this.element.top);}else if(parameter=='lightwindow_left'&&this.element.left){return unescape(this.element.left);}else if(parameter=='lightwindow_type'&&this.element.type){return unescape(this.element.type);}else if(parameter=='lightwindow_show_images'&&this.element.showImages){return unescape(this.element.showImages);}else if(parameter=='lightwindow_height'&&this.element.height){return unescape(this.element.height);}else if(parameter=='lightwindow_width'&&this.element.width){return unescape(this.element.width);}else if(parameter=='lightwindow_loading_animation'&&this.element.loadingAnimation){return unescape(this.element.loadingAnimation);}else if(parameter=='lightwindow_iframe_embed'&&this.element.iframeEmbed){return unescape(this.element.iframeEmbed);}else if(parameter=='lightwindow_form'&&this.element.form){return unescape(this.element.form);}else{if(!parameters){if(this.element.params)parameters=this.element.params;else return;}var value;var parameterArray=parameters.split(',');var compareString=parameter+'=';var compareLength=compareString.length;for(var i=0;i<parameterArray.length;i++){if(parameterArray[i].substr(0,compareLength)==compareString){var currentParameter=parameterArray[i].split('=');value=currentParameter[1];break;}}if(!value)return false;else return unescape(value);}},_browserDimensions:function(){if(Prototype.Browser.IE){this.dimensions.viewport.height=document.documentElement.clientHeight;this.dimensions.viewport.width=document.documentElement.clientWidth;}else{this.dimensions.viewport.height=window.innerHeight;this.dimensions.viewport.width=document.width||document.body.offsetWidth;}},_getScrollerWidth:function(){var scrollDiv=Element.extend(document.createElement('div'));scrollDiv.setAttribute('id','lightwindow_scroll_div');scrollDiv.setStyle({position:'absolute',top:'-10000px',left:'-10000px',width:'100px',height:'100px',overflow:'hidden'});var contentDiv=Element.extend(document.createElement('div'));contentDiv.setAttribute('id','lightwindow_content_scroll_div');contentDiv.setStyle({width:'100%',height:'200px'});scrollDiv.appendChild(contentDiv);var body=document.getElementsByTagName('body')[0];body.appendChild(scrollDiv);var noScroll=$('lightwindow_content_scroll_div').offsetWidth;scrollDiv.style.overflow='auto';var withScroll=$('lightwindow_content_scroll_div').offsetWidth;Element.remove($('lightwindow_scroll_div'));this.scrollbarOffset=noScroll-withScroll;},_addParamToObject:function(name,value,object,id){var param=document.createElement('param');param.setAttribute('value',value);param.setAttribute('name',name);if(id){param.setAttribute('id',id);}object.appendChild(param);return object;},_outerHTML:function(object){if(Prototype.Browser.IE){return object.outerHTML;}else{var clone=object.cloneNode(true);var cloneDiv=document.createElement('div');cloneDiv.appendChild(clone);return cloneDiv.innerHTML;}},_convertToMarkup:function(object,closeTag){var markup=this._outerHTML(object).replace('</'+closeTag+'>','');if(Prototype.Browser.IE){for(var i=0;i<object.childNodes.length;i++){markup+=this._outerHTML(object.childNodes[i]);}markup+='</'+closeTag+'>';}return markup;},_appendObject:function(object,closeTag,appendTo){if(Prototype.Browser.IE){appendTo.innerHTML+=this._convertToMarkup(object,closeTag);if(this.options.EOLASFix.indexOf(this._fileType(this.element.href))>-1){var objectElements=document.getElementsByTagName('object');for(var i=0;i<objectElements.length;i++){if(objectElements[i].getAttribute("data"))objectElements[i].removeAttribute('data');objectElements[i].outerHTML=objectElements[i].outerHTML;objectElements[i].style.visibility="visible";}}}else{appendTo.appendChild(object);}},_appendIframe:function(scroll){var iframe=document.createElement('iframe');iframe.setAttribute('id','lightwindow_iframe');iframe.setAttribute('name','lightwindow_iframe');iframe.setAttribute('src','about:blank');iframe.setAttribute('height','100%');iframe.setAttribute('width','100%');iframe.setAttribute('frameborder','0');iframe.setAttribute('marginwidth','0');iframe.setAttribute('marginheight','0');iframe.setAttribute('scrolling',scroll);this._appendObject(iframe,'iframe',$('lightwindow_contents'));},_writeToIframe:function(content){var template=this.options.skin.iframe;template=template.replace('{body_replace}',content);if($('lightwindow_iframe').contentWindow){$('lightwindow_iframe').contentWindow.document.open();$('lightwindow_iframe').contentWindow.document.write(template);$('lightwindow_iframe').contentWindow.document.close();}else{$('lightwindow_iframe').contentDocument.open();$('lightwindow_iframe').contentDocument.write(template);$('lightwindow_iframe').contentDocument.close();}},_loadWindow:function(){switch(this.windowType){case'image':var current=0;var images=[];this.checkImage=[];this.resizeTo.height=this.resizeTo.width=0;this.imageCount=this._getParameter('lightwindow_show_images')?parseInt(this._getParameter('lightwindow_show_images')):1;if(gallery=this._getGalleryInfo(this.element.rel)){for(current=0;current<this.galleries[gallery[0]][gallery[1]].length;current++){if(this.contentToFetch.indexOf(this.galleries[gallery[0]][gallery[1]][current].href)>-1){break;}}if(this.galleries[gallery[0]][gallery[1]][current-this.imageCount]){this.navigationObservers.previous=this.galleries[gallery[0]][gallery[1]][current-this.imageCount];}else{this.navigationObservers.previous=false;}if(this.galleries[gallery[0]][gallery[1]][current+this.imageCount]){this.navigationObservers.next=this.galleries[gallery[0]][gallery[1]][current+this.imageCount];}else{this.navigationObservers.next=false;}this.activeGallery=true;}else{this.navigationObservers.previous=false;this.navigationObservers.next=false;this.activeGallery=false;}for(var i=current;i<(current+this.imageCount);i++){if(gallery&&this.galleries[gallery[0]][gallery[1]][i]){this.contentToFetch=this.galleries[gallery[0]][gallery[1]][i].href;this.galleryLocation={current:(i+1)/this.imageCount,total:(this.galleries[gallery[0]][gallery[1]].length)/this.imageCount};if(!this.galleries[gallery[0]][gallery[1]][i+this.imageCount]){$('lightwindow_next').setStyle({display:'none'});}else{$('lightwindow_next').setStyle({display:'block'});$('lightwindow_next_title').innerHTML=this.galleries[gallery[0]][gallery[1]][i+this.imageCount].title;}if(!this.galleries[gallery[0]][gallery[1]][i-this.imageCount]){$('lightwindow_previous').setStyle({display:'none'});}else{$('lightwindow_previous').setStyle({display:'block'});$('lightwindow_previous_title').innerHTML=this.galleries[gallery[0]][gallery[1]][i-this.imageCount].title;}}images[i]=document.createElement('img');images[i].setAttribute('id','lightwindow_image_'+i);images[i].setAttribute('border','0');images[i].setAttribute('src',this.contentToFetch);$('lightwindow_contents').appendChild(images[i]);this.checkImage[i]=new PeriodicalExecuter(function(i){if(!(typeof $('lightwindow_image_'+i).naturalWidth!="undefined"&&$('lightwindow_image_'+i).naturalWidth==0)){this.checkImage[i].stop();var imageHeight=$('lightwindow_image_'+i).getHeight();if(imageHeight>this.resizeTo.height){this.resizeTo.height=imageHeight;}this.resizeTo.width+=$('lightwindow_image_'+i).getWidth();this.imageCount--;$('lightwindow_image_'+i).setStyle({height:'100%'});if(this.imageCount==0){this._processWindow();}}}.bind(this,i),1);}break;case'media':var current=0;this.resizeTo.height=this.resizeTo.width=0;if(gallery=this._getGalleryInfo(this.element.rel)){for(current=0;current<this.galleries[gallery[0]][gallery[1]].length;current++){if(this.contentToFetch.indexOf(this.galleries[gallery[0]][gallery[1]][current].href)>-1){break;}}if(this.galleries[gallery[0]][gallery[1]][current-1]){this.navigationObservers.previous=this.galleries[gallery[0]][gallery[1]][current-1];}else{this.navigationObservers.previous=false;}if(this.galleries[gallery[0]][gallery[1]][current+1]){this.navigationObservers.next=this.galleries[gallery[0]][gallery[1]][current+1];}else{this.navigationObservers.next=false;}this.activeGallery=true;}else{this.navigationObservers.previous=false;this.navigationObservers.next=false;this.activeGallery=false;}if(gallery&&this.galleries[gallery[0]][gallery[1]][current]){this.contentToFetch=this.galleries[gallery[0]][gallery[1]][current].href;this.galleryLocation={current:current+1,total:this.galleries[gallery[0]][gallery[1]].length};if(!this.galleries[gallery[0]][gallery[1]][current+1]){$('lightwindow_next').setStyle({display:'none'});}else{$('lightwindow_next').setStyle({display:'block'});$('lightwindow_next_title').innerHTML=this.galleries[gallery[0]][gallery[1]][current+1].title;}if(!this.galleries[gallery[0]][gallery[1]][current-1]){$('lightwindow_previous').setStyle({display:'none'});}else{$('lightwindow_previous').setStyle({display:'block'});$('lightwindow_previous_title').innerHTML=this.galleries[gallery[0]][gallery[1]][current-1].title;}}if(this._getParameter('lightwindow_iframe_embed')){this.resizeTo.height=this.dimensions.viewport.height;this.resizeTo.width=this.dimensions.viewport.width;}else{this.resizeTo.height=this._getParameter('lightwindow_height');this.resizeTo.width=this._getParameter('lightwindow_width');}this._processWindow();break;case'external':this._appendIframe('auto');this.resizeTo.height=this.dimensions.viewport.height;this.resizeTo.width=this.dimensions.viewport.width;this._processWindow();break;case'page':var newAJAX=new Ajax.Request(this.contentToFetch,{method:'get',parameters:'',onComplete:function(response){$('lightwindow_contents').innerHTML+=response.responseText;this.resizeTo.height=$('lightwindow_contents').scrollHeight+(this.options.contentOffset.height);this.resizeTo.width=$('lightwindow_contents').scrollWidth+(this.options.contentOffset.width);this._processWindow();}.bind(this)});break;case'inline':var content=this.contentToFetch;if(content.indexOf('?')>-1){content=content.substring(0,content.indexOf('?'));}content=content.substring(content.indexOf('#')+1);new Insertion.Top($('lightwindow_contents'),$(content).innerHTML);this.resizeTo.height=$('lightwindow_contents').scrollHeight+(this.options.contentOffset.height);this.resizeTo.width=$('lightwindow_contents').scrollWidth+(this.options.contentOffset.width);this._toggleTroubleElements('hidden',true);this._processWindow();break;default:throw("Page Type could not be determined, please amend this lightwindow URL "+this.contentToFetch);break;}},_resizeWindowToFit:function(){if(this.resizeTo.height+this.dimensions.cruft.height>this.dimensions.viewport.height){var heightRatio=this.resizeTo.height/this.resizeTo.width;this.resizeTo.height=this.dimensions.viewport.height-this.dimensions.cruft.height-(2*this.options.viewportPadding);if(this.windowType=='image'||(this.windowType=='media'&&!this._getParameter('lightwindow_iframe_embed'))){this.resizeTo.width=this.resizeTo.height/heightRatio;$('lightwindow_data_slide_inner').setStyle({width:this.resizeTo.width+'px'});}}if(this.resizeTo.width+this.dimensions.cruft.width>this.dimensions.viewport.width){var widthRatio=this.resizeTo.width/this.resizeTo.height;this.resizeTo.width=this.dimensions.viewport.width-2*this.dimensions.cruft.width-(2*this.options.viewportPadding);if(this.windowType=='image'||(this.windowType=='media'&&!this._getParameter('lightwindow_iframe_embed'))){this.resizeTo.height=this.resizeTo.width/widthRatio;$('lightwindow_data_slide_inner').setStyle({height:this.resizeTo.height+'px'});}}},_presetWindowSize:function(){if(this._getParameter('lightwindow_height')){this.resizeTo.height=parseFloat(this._getParameter('lightwindow_height'));}if(this._getParameter('lightwindow_width')){this.resizeTo.width=parseFloat(this._getParameter('lightwindow_width'));}},_processWindow:function(){this.dimensions.dataEffects=[];if(this.element.caption||this.element.author||(this.activeGallery&&this.options.showGalleryCount)){if(this.element.caption){$('lightwindow_data_caption').innerHTML=this.element.caption;$('lightwindow_data_caption').setStyle({display:'block'});}else{$('lightwindow_data_caption').setStyle({display:'none'});}if(this.element.author){$('lightwindow_data_author').innerHTML=this.element.author;$('lightwindow_data_author_container').setStyle({display:'block'});}else{$('lightwindow_data_author_container').setStyle({display:'none'});}if(this.activeGallery&&this.options.showGalleryCount){$('lightwindow_data_gallery_current').innerHTML=this.galleryLocation.current;$('lightwindow_data_gallery_total').innerHTML=this.galleryLocation.total;$('lightwindow_data_gallery_container').setStyle({display:'block'});}else{$('lightwindow_data_gallery_container').setStyle({display:'none'});}$('lightwindow_data_slide_inner').setStyle({width:this.resizeTo.width+'px',height:'auto',visibility:'visible',display:'block'});$('lightwindow_data_slide').setStyle({height:$('lightwindow_data_slide').getHeight()+'px',width:'1px',overflow:'hidden',display:'block'});}else{$('lightwindow_data_slide').setStyle({display:'none',width:'auto'});$('lightwindow_data_slide_inner').setStyle({display:'none',visibility:'hidden',width:this.resizeTo.width+'px',height:'0px'});}if(this.element.title!='null'){$('lightwindow_title_bar_title').innerHTML=this.element.title;}else{$('lightwindow_title_bar_title').innerHTML='';}var originalContainerDimensions={height:$('lightwindow_container').getHeight(),width:$('lightwindow_container').getWidth()};$('lightwindow_container').setStyle({height:'auto',width:$('lightwindow_container').getWidth()+this.options.contentOffset.width-(this.windowActive?this.options.contentOffset.width:0)+'px'});var newContainerDimensions={height:$('lightwindow_container').getHeight(),width:$('lightwindow_container').getWidth()};this.containerChange={height:originalContainerDimensions.height-newContainerDimensions.height,width:originalContainerDimensions.width-newContainerDimensions.width};this.dimensions.container={height:$('lightwindow_container').getHeight(),width:$('lightwindow_container').getWidth()};this.dimensions.cruft={height:this.dimensions.container.height-$('lightwindow_contents').getHeight()+this.options.contentOffset.height,width:this.dimensions.container.width-$('lightwindow_contents').getWidth()+this.options.contentOffset.width};this._presetWindowSize();this._resizeWindowToFit();if(!this.windowActive){$('lightwindow_container').setStyle({left:-(this.dimensions.container.width/2)+'px',top:-(this.dimensions.container.height/2)+'px'});}$('lightwindow_container').setStyle({height:this.dimensions.container.height+'px',width:this.dimensions.container.width+'px'});this._displayLightWindow('block','visible');this._animateLightWindow();},_animateLightWindow:function(){if(this.options.animationHandler){this.options.animationHandler().bind(this);}else{this._defaultAnimationHandler();}},_handleNavigation:function(display){if(this.options.navigationHandler){this.options.navigationHandler().bind(this,display);}else{this._defaultDisplayNavigation(display);}},_handleTransition:function(){if(this.options.transitionHandler){this.options.transitionHandler().bind(this);}else{this._defaultTransitionHandler();}},_handleFinalWindowAnimation:function(delay){if(this.options.finalAnimationHandler){this.options.finalAnimationHandler().bind(this,delay);}else{this._defaultfinalWindowAnimationHandler(delay);}},_handleGalleryAnimation:function(list){if(this.options.galleryAnimationHandler){this.options.galleryAnimationHandler().bind(this,list);}else{this._defaultGalleryAnimationHandler(list);}},_defaultDisplayNavigation:function(display){if(display){$('lightwindow_navigation').setStyle({display:'block',height:$('lightwindow_contents').getHeight()+'px',width:'100%',marginTop:this.options.dimensions.titleHeight+'px'});}else{$('lightwindow_navigation').setStyle({display:'none',height:'auto',width:'auto'});}},_defaultAnimationHandler:function(){if(this.element.caption||this.element.author||(this.activeGallery&&this.options.showGalleryCount)){$('lightwindow_data_slide').setStyle({display:'none',width:'auto'});this.dimensions.dataEffects.push(new Effect.SlideDown('lightwindow_data_slide',{sync:true}),new Effect.Appear('lightwindow_data_slide',{sync:true,from:0.0,to:1.0}));}$('lightwindow_title_bar_inner').setStyle({height:'0px',marginTop:this.options.dimensions.titleHeight+'px'});this.dimensions.dataEffects.push(new Effect.Morph('lightwindow_title_bar_inner',{sync:true,style:{height:this.options.dimensions.titleHeight+'px',marginTop:'0px'}}),new Effect.Appear('lightwindow_title_bar_inner',{sync:true,from:0.0,to:1.0}));if(!this.options.hideGalleryTab){this._handleGalleryAnimation(false);if($('lightwindow_galleries_tab_container').getHeight()==0){this.dimensions.dataEffects.push(new Effect.Morph('lightwindow_galleries_tab_container',{sync:true,style:{height:'20px',marginTop:'0px'}}));$('lightwindow_galleries').setStyle({width:'0px'});}}var resized=false;var ratio=this.dimensions.container.width-$('lightwindow_contents').getWidth()+this.resizeTo.width+this.options.contentOffset.width;if(ratio!=$('lightwindow_container').getWidth()){new Effect.Parallel([new Effect.Scale('lightwindow_contents',100*(this.resizeTo.width/$('lightwindow_contents').getWidth()),{scaleFrom:100*($('lightwindow_contents').getWidth()/($('lightwindow_contents').getWidth()+(this.options.contentOffset.width))),sync:true,scaleY:false,scaleContent:false}),new Effect.Scale('lightwindow_container',100*(ratio/(this.dimensions.container.width)),{sync:true,scaleY:false,scaleFromCenter:true,scaleContent:false})],{duration:this.duration,delay:0.25,queue:{position:'end',scope:'lightwindowAnimation'}});}ratio=this.dimensions.container.height-$('lightwindow_contents').getHeight()+this.resizeTo.height+this.options.contentOffset.height;if(ratio!=$('lightwindow_container').getHeight()){new Effect.Parallel([new Effect.Scale('lightwindow_contents',100*(this.resizeTo.height/$('lightwindow_contents').getHeight()),{scaleFrom:100*($('lightwindow_contents').getHeight()/($('lightwindow_contents').getHeight()+(this.options.contentOffset.height))),sync:true,scaleX:false,scaleContent:false}),new Effect.Scale('lightwindow_container',100*(ratio/(this.dimensions.container.height)),{sync:true,scaleX:false,scaleFromCenter:true,scaleContent:false})],{duration:this.duration,afterFinish:function(){if(this.dimensions.dataEffects.length>0){if(!this.options.hideGalleryTab){$('lightwindow_galleries').setStyle({width:this.resizeTo.width+'px'});}new Effect.Parallel(this.dimensions.dataEffects,{duration:this.duration,afterFinish:function(){this._finishWindow();}.bind(this),queue:{position:'end',scope:'lightwindowAnimation'}});}}.bind(this),queue:{position:'end',scope:'lightwindowAnimation'}});resized=true;}if(!resized&&this.dimensions.dataEffects.length>0){new Effect.Parallel(this.dimensions.dataEffects,{duration:this.duration,beforeStart:function(){if(!this.options.hideGalleryTab){$('lightwindow_galleries').setStyle({width:this.resizeTo.width+'px'});}if(this.containerChange.height!=0||this.containerChange.width!=0){new Effect.MoveBy('lightwindow_container',this.containerChange.height,this.containerChange.width,{transition:Effect.Transitions.sinoidal});}}.bind(this),afterFinish:function(){this._finishWindow();}.bind(this),queue:{position:'end',scope:'lightwindowAnimation'}});}},_defaultfinalWindowAnimationHandler:function(delay){if(this.windowType=='media'||this._getParameter('lightwindow_loading_animation')){Element.hide('lightwindow_loading');this._handleNavigation(this.activeGallery);this._setStatus(false);}else{Effect.Fade('lightwindow_loading',{duration:0.75,delay:1.0,afterFinish:function(){if(this.windowType!='image'&&this.windowType!='media'&&this.windowType!='external'){$('lightwindow_contents').setStyle({overflow:'auto'});}this._handleNavigation(this.activeGallery);this._defaultGalleryAnimationHandler();this._setStatus(false);}.bind(this),queue:{position:'end',scope:'lightwindowAnimation'}});}},_defaultGalleryAnimationHandler:function(list){if(this.activeGallery){$('lightwindow_galleries').setStyle({display:'block',marginBottom:$('lightwindow_data_slide').getHeight()+this.options.contentOffset.height/2+'px'});$('lightwindow_navigation').setStyle({height:$('lightwindow_contents').getHeight()-20+'px'});}else{$('lightwindow_galleries').setStyle({display:'none'});$('lightwindow_galleries_tab_container').setStyle({height:'0px',marginTop:'20px'});$('lightwindow_galleries_list').setStyle({height:'0px'});return false;}if(list){if($('lightwindow_galleries_list').getHeight()==0){var height=$('lightwindow_contents').getHeight()*0.80;$('lightwindow_galleries_tab_span').className='down';}else{var height=0;$('lightwindow_galleries_tab_span').className='up';}new Effect.Morph('lightwindow_galleries_list',{duration:this.duration,transition:Effect.Transitions.sinoidal,style:{height:height+'px'},beforeStart:function(){$('lightwindow_galleries_list').setStyle({overflow:'hidden'});},afterFinish:function(){$('lightwindow_galleries_list').setStyle({overflow:'auto'});},queue:{position:'end',scope:'lightwindowAnimation'}});}},_defaultTransitionHandler:function(){this.dimensions.dataEffects=[];if($('lightwindow_data_slide').getStyle('display')!='none'){this.dimensions.dataEffects.push(new Effect.SlideUp('lightwindow_data_slide',{sync:true}),new Effect.Fade('lightwindow_data_slide',{sync:true,from:1.0,to:0.0}));}if(!this.options.hideGalleryTab){if($('lightwindow_galleries').getHeight()!=0&&!this.options.hideGalleryTab){this.dimensions.dataEffects.push(new Effect.Morph('lightwindow_galleries_tab_container',{sync:true,style:{height:'0px',marginTop:'20px'}}));}if($('lightwindow_galleries_list').getHeight()!=0){$('lightwindow_galleries_tab_span').className='up';this.dimensions.dataEffects.push(new Effect.Morph('lightwindow_galleries_list',{sync:true,style:{height:'0px'},transition:Effect.Transitions.sinoidal,beforeStart:function(){$('lightwindow_galleries_list').setStyle({overflow:'hidden'});},afterFinish:function(){$('lightwindow_galleries_list').setStyle({overflow:'auto'});}}));}}this.dimensions.dataEffects.push(new Effect.Morph('lightwindow_title_bar_inner',{sync:true,style:{height:'0px',marginTop:this.options.dimensions.titleHeight+'px'}}),new Effect.Fade('lightwindow_title_bar_inner',{sync:true,from:1.0,to:0.0}));new Effect.Parallel(this.dimensions.dataEffects,{duration:this.duration,afterFinish:function(){this._loadWindow();}.bind(this),queue:{position:'end',scope:'lightwindowAnimation'}});},_defaultFormHandler:function(e){var element=Event.element(e).parentNode;var parameterString=Form.serialize(this._getParameter('lightwindow_form',element.getAttribute('params')));if(this.options.formMethod=='post'){var newAJAX=new Ajax.Request(element.href,{method:'post',postBody:parameterString,onComplete:this.openWindow.bind(this,element)});}else if(this.options.formMethod=='get'){var newAJAX=new Ajax.Request(element.href,{method:'get',parameters:parameterString,onComplete:this.openWindow.bind(this,element)});}},_finishWindow:function(){if(this.windowType=='external'){$('lightwindow_iframe').setAttribute('src',this.element.href);this._handleFinalWindowAnimation(1);}else if(this.windowType=='media'){var outerObject=document.createElement('object');outerObject.setAttribute('classid',this.options.classids[this._fileExtension(this.contentToFetch)]);outerObject.setAttribute('codebase',this.options.codebases[this._fileExtension(this.contentToFetch)]);outerObject.setAttribute('id','lightwindow_media_primary');outerObject.setAttribute('name','lightwindow_media_primary');outerObject.setAttribute('width',this.resizeTo.width);outerObject.setAttribute('height',this.resizeTo.height);outerObject=this._addParamToObject('movie',this.contentToFetch,outerObject);outerObject=this._addParamToObject('src',this.contentToFetch,outerObject);outerObject=this._addParamToObject('controller','true',outerObject);outerObject=this._addParamToObject('wmode','transparent',outerObject);outerObject=this._addParamToObject('cache','false',outerObject);outerObject=this._addParamToObject('quality','high',outerObject);if(!Prototype.Browser.IE){var innerObject=document.createElement('object');innerObject.setAttribute('type',this.options.mimeTypes[this._fileExtension(this.contentToFetch)]);innerObject.setAttribute('data',this.contentToFetch);innerObject.setAttribute('id','lightwindow_media_secondary');innerObject.setAttribute('name','lightwindow_media_secondary');innerObject.setAttribute('width',this.resizeTo.width);innerObject.setAttribute('height',this.resizeTo.height);innerObject=this._addParamToObject('controller','true',innerObject);innerObject=this._addParamToObject('wmode','transparent',innerObject);innerObject=this._addParamToObject('cache','false',innerObject);innerObject=this._addParamToObject('quality','high',innerObject);outerObject.appendChild(innerObject);}if(this._getParameter('lightwindow_iframe_embed')){this._appendIframe('no');this._writeToIframe(this._convertToMarkup(outerObject,'object'));}else{this._appendObject(outerObject,'object',$('lightwindow_contents'));}this._handleFinalWindowAnimation(0);}else{this._handleFinalWindowAnimation(0);}this._setupActions();}} -
Event.observe(window,'load',lightwindowInit,false);var myLightWindow=null;function lightwindowInit(){myLightWindow=new lightwindow();}
Dentro de tu HTML escribe las siguientes funciones de JavaScript:
-
<script language="javascript">
-
function muestraVentanaModal()
-
{
-
myLightWindow.activateWindow({href: 'cargando.gif', title: 'Cargando...', caption: "La página se está cargando, por favor espere."});
-
}
-
-
function quitaVentanaModal()
-
{
-
myLightWindow.deactivate();
-
}
-
</script>
Para el preloader en flash, tendrías que poner el siguiente código en el primer frame del Flash (de tal forma que esta línea de código se ejecute sólo una vez. Si tu preloader hace que se ejecute el primer frame varias veces mientras se carga, entonces utiliza un contador):
-
getURL("javascript:muestraVentanaModal();");
Cuando se termine de ejecutar el preloader (cuando llegue a su estado complete, por así decirlo), tendrás que ejecutar el siguiente código:
-
getURL("javascript:quitaVentanaModal();");
Saludos.
Gracias Carla por tu pronta respuesta, probare lo que me dices de darle un tamaño fijo pero como el fallo es muy aleatorio y solo pasa en IE me da pena quitarle la gracia de que se adapte al tamaño de las fotos.
Por otro lado tengo otro problema que me vuelve loca. Tengo una película principal que va cargando peliculas externas y, de nuevo solo a veces y solo en IE, se me quedan "trozos" de la pelicula anterior, como si no refrescara la pantalla. El problema lo he encontrado: es el tener wmode de la pelicula "transparent" pero si lo cambio, el lightwindow se muestra por detrás de la pelicula ¿eso tiene solucion?? ¿hay alguna otra herramienta como el lightwindow(que me muestre jpg, pdf, swf...) y no necesite el wmode transparent?? ¿Por que todo esto solo pasa en el IE que es donde casi todos van a verlo?
Muchas gracias de nuevo y enhorabuena por esta página y tu atención
Simon
Hola Simon,
Si las fotos que cargas son fijas, es decir, no las cargas dinámicamente de acuerdo a una base de datos o un XML, podrías pasarle a la función muestraImagen el ancho y el alto de cada foto. Ejemplo:
-
fotos_mc.foto1.onRelease = function() { getURL("javascript:muestraImagen('foto1.jpg', 'Descripción Foto #1', '250', '100');"); }
-
fotos_mc.foto2.onRelease = function() { getURL("javascript:muestraImagen('foto2.jpg', 'Descripción Foto #2', '400', '200');"); }
-
fotos_mc.foto3.onRelease = function() { getURL("javascript:muestraImagen('foto3.jpg', 'Descripción Foto #3', '300', '400');"); }
-
fotos_mc.foto4.onRelease = function() { getURL("javascript:muestraImagen('foto4.jpg', 'Descripción Foto #4', '500', '600');"); }
-
fotos_mc.foto5.onRelease = function() { getURL("javascript:muestraImagen('foto5.jpg', 'Descripción Foto #5', '100', '100');"); }
-
fotos_mc.foto6.onRelease = function() { getURL("javascript:muestraImagen('foto6.jpg', 'Descripción Foto #6', '300', '300');"); }
-
fotos_mc.foto7.onRelease = function() { getURL("javascript:muestraImagen('foto7.jpg', 'Descripción Foto #7', '250', '100');"); }
No sé por qué será lo de los trozos de la película anterior, pero ¿has probado poniéndole un fondo a tu película? Crea una capa hasta abajo y ahí dibuja un rectángulo del tamaño de tu área de trabajo, con color blanco o el que quieras. Me platicas lo que sucede =0)
Saludos.
Hola, tengo una duda, estoy haciendo una página web en la que tengo que mostrar unos videos en quicktime.
Tengo un scroll hecho en flash, y no se si puedo utilizar el efecto lightwindow para mostrar esos videos.
Alguien me puede ayudar con el código?
Muchas gracias por adelantado.
Saludos desde galicia.
El problema es que todas las imagenes las cargo de un xml (y son muchas y varian en tamaño. Dandole el tamaño fijo de imagen al lightwindow funciona pero las imagenes que no tienen ese tamaño las deforma o las pone aun lado y así pierde la gracia. ¿sabes si el thickbox da menos problemas de ese tipo? por que estoy pensando seriamente en cambiar buscar otro modo de abrir las imágenes y documentos, ya que la mayoria lo van aver en explorer.
Mi pelicula tiene fondo pero los contenidos de las peliculas los cargo por programación en sprites o loaders.De momento el problema de los "trozos" de pelicula lo he resuelto haciendo un tween a alpha cero del sprite contenedor o el loader, segun casos, antes de descargarlos y quitar el hijo del escenario. Lo hice así por que parecia totalmente ser un problema de visualización del explorer y de momento funciona ok.
Gracias de nuevo por tu ayuda.
Hola Di,
Prácticamente el código es el mismo, sólo tienes que hacer referencia al video y especificarle el ancho y alto que utilizará.
Ejemplo sacado de la página de LightWindow:
-
<a href="http://images.apple.com/movies/newline/the_number_23/the_number_23-tlr1_h.640.mov" class="lightwindow" params="lightwindow_width=640,lightwindow_height=290" rel="nofollow">Link Name</a>
Saludos.
Hola Simon,
Casi no he utilizado el Thickbox, pero es fácil de implemantar siguiendo este mismo tutorial, podrías hacer la prueba y comentarnos =0).
Saludos.
Hola Carla, espero no molestar pero no puedo mostrar mi ventana modal como preloader, me puedes decir asi como nivel básico que debo hacer ya cambié el js que me indicas y puse las as en el flash, ¿que debo subir al server, en carpetas o en raiz? en base al archivo que descargé desde aquí. Si puedes ayudarme mil gracias... seguiré intentando.
Hola bueno debo agradecer tu ayuda, me ha servido monton =).
Lo unico que me faltaria saber es como lograr abrir el lightbox automaticamente al abrir el index, es para motrar ofertas.
Mi web esta hecha 100% en flash.
Saludos
Hola Estaban,
De acuerdo a este tutorial en la parte de Lightwindow, sólo tendrías que hacer es modificar el tag body de tu página:
-
<body onLoad="javascript:muestraImagen(...)">
Saludos.
YO DE NUEVO =p
COMO HAGO PARA QUE EN VEZ DE UN JPG ME CARGE UN SWF AL CARGAR LA PAGINA
no me resulto poniendo eso
Hola Esteban,
¿Cuál es el código que utilizas para oscurecer la pantalla?
Por favor ponlo entre las etiqutas [ js] y [ /js] o bien [ as] y [ /as] o [ html] y [ /html]. No olvides quitar el espacio que está después de cada [.
Para cargar un swf en lugar de un jpg lee los comentarios de este post, específicamente los tres primeros.
Saludos.
No he logrado hacer el window modal tipo preloader, me puedes explicar así en nivel mega básico plis... grax.
Hola de nuevo Carla, bueno me intereso este tutorial y quiero intentar hacerlo, ayer me la pase tratando de resolver errores que fueron mi culpa y otros problemitas que me dieron los controles de seguridad de adobe y de mi pc, despues de autorizar todo crei ya estaba listo pero aun me falla algo
Queria probarlo en la pc sin subirlo a internet no se si a eso se deba que no funcione
Bueno publique el proyecto que contiene el scroll ya con el codigo extra en html y flash
Tome ese mismo html, le agregue el codigo html extra, lo pegue donde indicas y lo guarde de nuevo en .html
Hice la carpeta llamada fotos para las imagenes (puse otras por el momento, por que las originales pesarian mas)las fotos son jpg y se llaman foto1, foto2 foto3
Descarge los 2 archivos que ahora estan en la misma carpeta que el html
Algo me falto, pero no se que sera
Los hice asi http://www.megaupload.com/?d=LRX6WSMW
Que crees que hice mal
Hola Alex,
Marca error de JavaScript, si lo estás revisando en Firefox es posible que no te hayas dado cuenta.
En el archivo HTML tienes las rutas de thickbox.js, jquery.js y thickbox.css con js/thickbox/; sin embargo, sólo tienes el archivo thickbox.js y thickbox.css en root (es decir, no están dentro de js/thickbox). Te recomiendo que bajes el archivo fuente de mi ejemplo y que copies la carpeta js/thickbox y la pegues en tu directorio, ya que esta carpea trae dos imágenes que también requiere el thickbox.
Además, en el archivo HTML dejaste los tres puntos suspensivos que yo había puesto en un comentario, habría que quitárselos. Tu HTML te quedaría de la siguiente forma:
-
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-
<!-- 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>
-
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
-
<title>scroll 73v4 codigo extra para oscurecer</title>
-
</head>
-
-
<body bgcolor="#ffffff">
-
<div id="flashcontent"></div>
-
<script type="text/javascript">
-
var so = new SWFObject("scroll 73v4 codigo extra para oscurecer.swf", "main", "1000", "200", "8");
-
so.addParam("wmode", "transparent");
-
so.addParam("allowScriptAccess", "always");
-
so.addParam("scale", "noscale");
-
so.write("flashcontent");
-
</script>
-
</body>
-
</html>
Observa que estoy utilizando la librería swfobject.js (que también viene en mi archivo fuente). Te lo recomiendo ya que te evitas el que el usuario tenga que hacer un click sobre el Flash antes de que éste "reaccione" o funcione, cuando esté viendo la página en Internet Explorer.
Saludos.
Tienes razon ya vi que son 3 archivos a descargar y lo del html si ya te diste cuenta de que practicamente no se nada
Otro buen detalle fue la imagen gif de loading que le agregaste a tu ejemplo sin ella pareceria que esta congelada la computadora
Intentare que me quede parecido al tuyo,
Gracias
Lo haces parecer tan facil que hasta crei poder hacerlo yo solo, ja
Hola Alex,
Sólo es un archivo zip a descargar y ahí vienen las librerías js del thickbox, la hoja de estilos y sus imágenes.
Sólo tienes que bajar el archivo y de ahí copiar los archivos que vienen en la carpeta thickbox y pegarlo en tu directorio, después tendrás que asegurarte que el archivo swfobject.js se encuentre dentro del directorio js; y por último, deberás cambiar tu código HTML por el que te puse aquí.
En resumen, la estructura de directorios quedaría de la siguiente forma:
./scroll 73v4 codigo extra para oscurecer.html
./scroll 73v4 codigo extra para oscurecer.swf
./js/swfobject.js
./js/thickbox/jquery.js
./js/thickbox/thickbox.js
./js/thickbox/thickbox.css
./js/thickbox/loadingAnimation.gif
./js/thickbox/macFFBgHack.png
Saludos.
Si lo descargue y lo acomode ahora esta funcionando excelente,
Si ve muy bien
Todo gracias a ti
Que tengas un buen fin de semana
Hola amigos disculpen por aqui molestando, quisiera preguntarle a carla o a alguien que me pueda ayudar el por que no me sale el efecto de lightwindow, el problema que presenta es que el fondo de la pagina si se oscurece pero no el flash, si pudieran checarlo porfavor http://www.alfil.jucrief.com, en la parte de portafolio, alli esta y porfavor ayudenme a resolver este problema, o el por que no me sale, espero su respuesta.
que tal carla disculpa esque estaba trabajando con el para ver si lo podia resolver pero no pude y necesito tu ayuda, porfavor checalo con internet explorer y te pido tu comentario te dejo mi correo para ver si podemos platicar y me asesores, xxx@yyy.zzz
que tal carla aquie sta el codigo
stop();
var velocidad:Number = 10;
derecha_btn.onRollOver = function() {
_root.onEnterFrame = function() {
if(fotos_mc._x > -7718) {
fotos_mc._x -= velocidad;
}
}
}
derecha_btn.onRollOut = function() {
delete _root.onEnterFrame;
}
izquierda_btn.onRollOver = function() {
_root.onEnterFrame = function() {
if(fotos_mc._x < 613.5) {
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_1.jpg', 'Desempeñando el Trabajo');"); }
fotos_mc.foto2.onRelease = function() { getURL("javascript:muestraImagen('foto2.jpg', 'Desempeñando el Trabajo');"); }
fotos_mc.foto3.onRelease = function() { getURL("javascript:muestraImagen('foto3.jpg', 'Desempeñando el Trabajo');"); }
fotos_mc.foto4.onRelease = function() { getURL("javascript:muestraImagen('foto4.jpg', 'Desempeñando el Trabajo');"); }
fotos_mc.foto5.onRelease = function() { getURL("javascript:muestraImagen('foto5.jpg', 'Desempeñando el Trabajo');"); }
fotos_mc.foto6.onRelease = function() { getURL("javascript:muestraImagen('foto6.jpg', 'Desempeñando el Trabajo');"); }
fotos_mc.foto7.onRelease = function() { getURL("javascript:muestraImagen('foto7.jpg', 'Desempeñando el Trabajo');"); }
fotos_mc.foto8.onRelease = function() { getURL("javascript:muestraImagen('foto8.jpg', 'Desempeñando el Trabajo');"); }
fotos_mc.foto9.onRelease = function() { getURL("javascript:muestraImagen('foto9.jpg', 'Desempeñando el Trabajo');"); }
fotos_mc.foto10.onRelease = function() { getURL("javascript:muestraImagen('foto10.jpg', 'Desempeñando el Trabajo');"); }
fotos_mc.foto11.onRelease = function() { getURL("javascript:muestraImagen('foto11.jpg', 'Desempeñando el Trabajo');"); }
fotos_mc.foto12.onRelease = function() { getURL("javascript:muestraImagen('foto12.jpg', 'Desempeñando el Trabajo');"); }
fotos_mc.foto13.onRelease = function() { getURL("javascript:muestraImagen('foto13.jpg', 'Desempeñando el Trabajo');"); }
fotos_mc.foto14.onRelease = function() { getURL("javascript:muestraImagen('foto14.jpg', 'Equipo de Trabajo Alfil');"); }
fotos_mc.foto15.onRelease = function() { getURL("javascript:muestraImagen('foto15.jpg', 'Equipo de Trabajo Alfil');"); }
fotos_mc.foto16.onRelease = function() { getURL("javascript:muestraImagen('foto16.jpg', 'Equipo de Trabajo Alfil');"); }
fotos_mc.foto17.onRelease = function() { getURL("javascript:muestraImagen('foto17.jpg', 'Equipo de Trabajo Alfil');"); }
fotos_mc.foto18.onRelease = function() { getURL("javascript:muestraImagen('foto18.jpg', 'Equipo de Trabajo Alfil');"); }
fotos_mc.foto19.onRelease = function() { getURL("javascript:muestraImagen('foto19.jpg', 'Equipo de Trabajo Alfil');"); }
fotos_mc.foto20.onRelease = function() { getURL("javascript:muestraImagen('foto20.jpg', 'Equipo de Trabajo Alfil');"); }
fotos_mc.foto21.onRelease = function() { getURL("javascript:muestraImagen('foto21.jpg', 'Equipo de Trabajo Alfil');"); }
fotos_mc.foto22.onRelease = function() { getURL("javascript:muestraImagen('foto22.jpg', 'Equipo de Trabajo Alfil');"); }
fotos_mc.foto23.onRelease = function() { getURL("javascript:muestraImagen('foto23.jpg', 'Equipo de Trabajo Alfil');"); }
fotos_mc.foto24.onRelease = function() { getURL("javascript:muestraImagen('foto24.jpg', 'Equipo de Trabajo Alfil');"); }
fotos_mc.foto25.onRelease = function() { getURL("javascript:muestraImagen('foto25.jpg', 'Equipo de Trabajo Alfil');"); }
fotos_mc.foto26.onRelease = function() { getURL("javascript:muestraImagen('foto26.jpg', 'Equipo de Trabajo Alfil');"); }
fotos_mc.foto27.onRelease = function() { getURL("javascript:muestraImagen('foto27.jpg', 'Equipo de Trabajo Alfil');"); }
fotos_mc.foto28.onRelease = function() { getURL("javascript:muestraImagen('foto28.jpg', 'Equipo de Trabajo Alfil');"); }
fotos_mc.foto29.onRelease = function() { getURL("javascript:muestraImagen('foto29.jpg', 'Equipo de Trabajo Alfil');"); }
fotos_mc.foto30.onRelease = function() { getURL("javascript:muestraImagen('foto30.jpg', 'Equipo de Trabajo Alfil');"); }
fotos_mc.foto31.onRelease = function() { getURL("javascript:muestraImagen('foto31.jpg', 'Equipo de Trabajo Alfil');"); }
fotos_mc.foto32.onRelease = function() { getURL("javascript:muestraImagen('foto32.jpg', 'Trabajo en Eventos');"); }
fotos_mc.foto33.onRelease = function() { getURL("javascript:muestraImagen('foto33.jpg', 'Trabajo en Eventos');"); }
fotos_mc.foto34.onRelease = function() { getURL("javascript:muestraImagen('foto34.jpg', 'Trabajo en Eventos');"); }
fotos_mc.foto35.onRelease = function() { getURL("javascript:muestraImagen('foto35.jpg', 'Trabajo en Eventos');"); }
fotos_mc.foto36.onRelease = function() { getURL("javascript:muestraImagen('foto36.jpg', 'Trabajo en Eventos');"); }
fotos_mc.foto37.onRelease = function() { getURL("javascript:muestraImagen('foto37.jpg', 'Trabajo en Eventos');"); }
fotos_mc.foto38.onRelease = function() { getURL("javascript:muestraImagen('foto38.jpg', 'Trabajo en Eventos');"); }
fotos_mc.foto39.onRelease = function() { getURL("javascript:muestraImagen('foto39.jpg', 'Trabajo en Eventos');"); }
fotos_mc.foto40.onRelease = function() { getURL("javascript:muestraImagen('foto40.jpg', 'Trabajo en Eventos');"); }
fotos_mc.foto41.onRelease = function() { getURL("javascript:muestraImagen('foto41.jpg', 'Trabajo en Eventos');"); }
fotos_mc.foto42.onRelease = function() { getURL("javascript:muestraImagen('foto42.jpg', 'Trabajo en Eventos');"); }
fotos_mc.foto43.onRelease = function() { getURL("javascript:muestraImagen('foto43.jpg', 'Trabajo en Eventos');"); }
fotos_mc.foto44.onRelease = function() { getURL("javascript:muestraImagen('foto44.jpg', 'Trabajo en Eventos');"); }
fotos_mc.foto45.onRelease = function() { getURL("javascript:muestraImagen('foto45.jpg', 'Trabajo en Eventos');"); }
fotos_mc.foto46.onRelease = function() { getURL("javascript:muestraImagen('foto46.jpg', 'Trabajo en Eventos');"); }
fotos_mc.foto47.onRelease = function() { getURL("javascript:muestraImagen('foto47.jpg', 'Trabajo en Eventos');"); }
fotos_mc.foto48.onRelease = function() { getURL("javascript:muestraImagen('foto48.jpg', 'Trabajo en Eventos');"); }
fotos_mc.foto49.onRelease = function() { getURL("javascript:muestraImagen('foto49.jpg', 'Trabajo en Eventos');"); }
fotos_mc.foto50.onRelease = function() { getURL("javascript:muestraImagen('foto50.jpg', 'Trabajo en Eventos');"); }
fotos_mc.foto51.onRelease = function() { getURL("javascript:muestraImagen('foto51.jpg', 'Trabajo en Eventos');"); }
fotos_mc.foto52.onRelease = function() { getURL("javascript:muestraImagen('foto52.jpg', 'Trabajo en Eventos');"); }
fotos_mc.foto53.onRelease = function() { getURL("javascript:muestraImagen('foto53.jpg', 'Trabajo en Eventos');"); }
fotos_mc.foto54.onRelease = function() { getURL("javascript:muestraImagen('foto54.jpg', 'Trabajo en Eventos');"); }
fotos_mc.foto55.onRelease = function() { getURL("javascript:muestraImagen('foto55.jpg', 'Trabajo en Eventos');"); }
fotos_mc.foto56.onRelease = function() { getURL("javascript:muestraImagen('foto56.jpg', 'Trabajo en Eventos');"); }
fotos_mc.foto57.onRelease = function() { getURL("javascript:muestraImagen('foto57.jpg', 'Trabajo en Eventos');"); }
fotos_mc.foto58.onRelease = function() { getURL("javascript:muestraImagen('foto58.jpg', 'Cursos de Capacitacion');"); }
fotos_mc.foto59.onRelease = function() { getURL("javascript:muestraImagen('foto59.jpg', 'Cursos de Capacitacion');"); }
fotos_mc.foto60.onRelease = function() { getURL("javascript:muestraImagen('foto60.jpg', 'Cursos de Capacitacion');"); }
fotos_mc.foto61.onRelease = function() { getURL("javascript:muestraImagen('foto61.jpg', 'Cursos de Capacitacion');"); }
fotos_mc.foto62.onRelease = function() { getURL("javascript:muestraImagen('foto62.jpg', 'Cursos de Capacitacion');"); }
fotos_mc.foto63.onRelease = function() { getURL("javascript:muestraImagen('foto63.jpg', 'Cursos de Capacitacion');"); }
fotos_mc.foto64.onRelease = function() { getURL("javascript:muestraImagen('foto64.jpg', 'Cursos de Capacitacion');"); }
fotos_mc.foto65.onRelease = function() { getURL("javascript:muestraImagen('foto65.jpg', 'Cursos de Capacitacion');"); }
fotos_mc.foto66.onRelease = function() { getURL("javascript:muestraImagen('foto66.jpg', 'Cursos de Capacitacion');"); }
fotos_mc.foto67.onRelease = function() { getURL("javascript:muestraImagen('foto67.jpg', 'Trabajo en Eventos');"); }
fotos_mc.foto68.onRelease = function() { getURL("javascript:muestraImagen('foto68.jpg', 'Trabajo en Eventos');"); }
fotos_mc.foto69.onRelease = function() { getURL("javascript:muestraImagen('foto69.jpg', 'Trabajo en Eventos');"); }
fotos_mc.foto70.onRelease = function() { getURL("javascript:muestraImagen('foto70.jpg', 'Trabajo en Eventos');"); }
fotos_mc.foto71.onRelease = function() { getURL("javascript:muestraImagen('foto71.jpg', 'Trabajo en Eventos');"); }
fotos_mc.foto72.onRelease = function() { getURL("javascript:muestraImagen('foto72.jpg', 'Trabajo en Eventos');"); }
fotos_mc.foto73.onRelease = function() { getURL("javascript:muestraImagen('foto73.jpg', 'Trabajo en Eventos');"); }
fotos_mc.foto74.onRelease = function() { getURL("javascript:muestraImagen('foto74.jpg', 'Trabajo en Eventos');"); }
fotos_mc.foto75.onRelease = function() { getURL("javascript:muestraImagen('foto75.jpg', 'Trabajo en Eventos');"); }
fotos_mc.foto76.onRelease = function() { getURL("javascript:muestraImagen('foto76.jpg', 'Trabajo en Eventos');"); }
fotos_mc.foto77.onRelease = function() { getURL("javascript:muestraImagen('foto77.jpg', 'Trabajo en Eventos');"); }
fotos_mc.foto78.onRelease = function() { getURL("javascript:muestraImagen('foto78.jpg', 'Trabajo en Eventos');"); }
fotos_mc.foto79.onRelease = function() { getURL("javascript:muestraImagen('foto79.jpg', 'Trabajo en Eventos');"); }
fotos_mc.foto80.onRelease = function() { getURL("javascript:muestraImagen('foto80.jpg', 'Trabajo en Eventos');"); }
fotos_mc.foto81.onRelease = function() { getURL("javascript:muestraImagen('foto81.jpg', 'Logos de Algunos Clientes');"); }
fotos_mc.foto82.onRelease = function() { getURL("javascript:muestraImagen('foto82.jpg', 'Logos de Algunos Clientes');"); }
fotos_mc.foto83.onRelease = function() { getURL("javascript:muestraImagen('foto83.jpg', 'Logos de Algunos Clientes');"); }
fotos_mc.foto84.onRelease = function() { getURL("javascript:muestraImagen('foto84.jpg', 'Logos de Algunos Clientes');"); }
fotos_mc.foto85.onRelease = function() { getURL("javascript:muestraImagen('foto85.jpg', 'Logos de Algunos Clientes');"); }
fotos_mc.foto86.onRelease = function() { getURL("javascript:muestraImagen('foto86.jpg', 'Logos de Algunos Clientes');"); }
fotos_mc.foto87.onRelease = function() { getURL("javascript:muestraImagen('foto87.jpg', 'Logos de Algunos Clientes');"); }
fotos_mc.foto88.onRelease = function() { getURL("javascript:muestraImagen('foto88.jpg', 'Logos de Algunos Clientes');"); }
fotos_mc.foto89.onRelease = function() { getURL("javascript:muestraImagen('foto89.jpg', 'Logos de Algunos Clientes');"); }
fotos_mc.foto90.onRelease = function() { getURL("javascript:muestraImagen('foto90.jpg', 'Logos de Algunos Clientes');"); }
fotos_mc.foto91.onRelease = function() { getURL("javascript:muestraImagen('foto91.jpg', 'Logos de Algunos Clientes');"); }
fotos_mc.foto92.onRelease = function() { getURL("javascript:muestraImagen('foto92.jpg', 'Logos de Algunos Clientes');"); }
fotos_mc.foto93.onRelease = function() { getURL("javascript:muestraImagen('foto93.jpg', 'Logos de Algunos Clientes');"); }
var vel:Number = 10;
arriba_btn.onRollOver = function() {
_root.onEnterFrame = function() {
if(texto_mc._y -1279.9) {
texto_mc._y -= vel;
}
}
}
abajo_btn.onRollOut = function() {
delete _root.onEnterFrame;
}
espero me puedas ayudar los comandos de boton_abajo y boton arriba son de los botones del texto.
al parecer carla, el efecto de oscurecer si lo hace pero pordetras del flash me podras ayudar porfavor.
Hola estoy realizando una pagina integramente en flash, adentro del html tengo el stge codigo:
-
<!-- CSS -->
-
-
<!-- JavaScript -->
-
-
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','100%','height','100%','movie','FIN','quality','high','wmode','opaque' ); //end AC code
Mi problema es que en fierefox al abrir el lightwindows me abre perfect, pero en IE el lightwindows como ke se va a una esquina y despues desaparece, pero cuando cambio el 100% a la medida del swf se ve bien, me podrian ayudar please
Disculpa que sea tan insistente pero es que me urge arreglar esto...
Probaste tu ejemplo cambiandoles las medidas del flash a 100% y 100% en firefox?
Hola Aref,
¿No tienes una liga donde pueda ver la página?
Pega tu código entre los tags [ html] y [ /html] (Quitando el espacio que está después de los corchetes que abren).
Saludos.
Hola carla quisiera saber si es que recibiste los archivos que te envie, para poder resolver mi problema carla, muchas gracias sigo con el mismo problema de que no abre la imagen te vuelvo a pasar el link, http://www.alfil.jucrief.com, espero lo puedas checar, te lo agradeceria infinitamente.
Carla una ultima cosa, como puedo hacer este efecto espectacular, pero que abra una galeria y no solo una fotografia te estaria muy agradecido si me puedes guiar algo. un besote
Hola Eduardo,
Lo más fácil sería hacer la galería de imágenes en un HTML y así en lugar de cargar una imagen con el LightWindow o el Thickbox cargas el HTML con la galería.
Aún así, en la página de LightWindow y en la de Thickbox vienen ejemplos de galerías.
Saludos.
hola
Muchimas gracias por tu ayuda a la hora de desarrollar esto con Flash.
Tengo un problema y esque al poner fotos verticales me hace una cosa rara con la foto y la estira.
como podria solucionar esto??
muchisimas gracias.
saludos desde Pamplona
ya lo he solucionado
el fallo me lo estaba dando ie8
en este caso tenia fotos verticales y horizontales pero habia un problema y lo he subsanado haciendo dos funciones.
muestraImagen
muestraImagenvertical
mi ultima duda seria poder hacer que una prograsion de fotos abriendo 1(en ved de abrir cerrar abrir cerrar)
muchisimas gracias-
ya lo he solucionado haciendo dos funciones
muestraImagen
muestraImagenhorizontal.
el fallo estaba en ie8.
ahora necesitaria saber como se puede realizar una galeria .
para no tener que abrir cerrar y abrir fotos.
gracias
Hola, hice este totirial me si me funcionó, pero, al poner el codigo:
function muestraImagen(imagen, titulo, descripcion, autor)
{
myLightWindow.activateWindow({href: 'chat/' + imagen, title: 'Servicio en linea', caption: titulo, author: '', width: 355, height: 250});
}
TODO EL CONTENIDO DE MI PAGINA SE PASA A LA IZQUIERDA DE MI PANTALLA, ANYTERIORMENTE ESTABA EL EL CENTRO, COMO PUEDO SOLUCIONARLO.
GRACIAS
Hola Gonzalo,
Este código no puede cambiar el estilo de tu página por lo que seguramente estás dejando algún tag abierto o lo estás colocando mal. Asegúrate de poner ese código antes del tag (sin el espacio) y entre los tags de script:
-
<script language="javascript">
-
function muestraImagen(imagen, titulo, descripcion, autor)
-
{
-
myLightWindow.activateWindow({href: 'chat/' + imagen, title: 'Servicio en linea', caption: titulo, author: '', width: 355, height: 250});
-
}
-
</script>
-
</head>
Si continúas con el mismo problema, por favor coloca todo el código de tu HTML para poderlo revisar.
Saludos.
Ok, muchas gracias por la ayuda, aquí esta elcodigo:
Documento sin título
function muestraImagen(imagen, titulo, descripcion, autor)
{
myLightWindow.activateWindow({href: 'chat/' + imagen, title: 'Servicio en linea', caption: titulo, author: '', width: 355, height: 250});
}
Documento sin título
function muestraImagen(imagen, titulo, descripcion, autor)
{
myLightWindow.activateWindow({href: 'chat/' + imagen, title: 'Servicio en linea', caption: titulo, author: '', width: 355, height: 250});
}
Si puedes subir un archivo txt con código a un servidor sería lo mejor; si no, puedes mandármelo a -----------
Saludos.
PERDON POR LA MOLESTIA, ACABO DE CHECAR QUE EN INTERNER EXPLORE NO SE VIDUALIZA LA PARTE DEL CODIGO DONDE TENGO EL EFECTO QUE ES EL QUE TE ENVIE, OSE ES UN BANNER EL COGIDO QUE TE ENVIE, Y EN MOZILA FIRE FOX, AHI ES DONDE SI LO VIDUALIZA PERO ME LO PASA DEL LADO IZQUIERDO
GRACIAS
Hola Gonzalo,
No entendí tu último mensaje pero si sigues teniendo el problema envíame el código al correo que te puse en mi penúltimo mensaje.
Saludos.
el codigo ya lo envie, de todas forma te lo envio de nuevo,
CUANDO ABRO MI PAGINA EL FIRE FOX, EL CONTENIDO SE CAMBIA DE LADO IZQUIERDO, PERO CUANDO ABRO MI PAGINA EL EL EXPLORADOR DE WINDOWS OSE, INTERNET EXPLORE, SE VISUALIZA NIRMAL A ESEPCION DE QUE NO SE VISUALIZA UN FLASH QUE QUE LE TENGO PUESTO. YO DIGO QUE ES PROBLEMA DE LOS EXPLORADORES, NO SE SI HAY OTRO EXPLORADOR O ALGUN CODIGO PARA RECONOCER CUALQUIER EFECTO QUE LE AGREGUEMOS A LAS PAGINA.
ESPERO HABERME EXPLICADO, MUCHAS GRACIAS.
Hola Carla!
llevo días visitando esta página revisándola comentario a comentario para que no se me pase nada....pero sigo teniendo problemas!
Ya he implantado el lightwindow en varias páginas sin problemas, y en alguna llamando al js desde flash.
Sin embargo, estoy teniendo problemas en un caso concreto.
Estoy desarrollando la web http://www.alainbainee.com y no hay manera de visualizar lightwindow desde IE (Firefox y Google Chrome no muestran problemas). Me da un error en prototype.js linea 1596, carácter 9.
En un principio pensé que era porque el flash estaba escalado al 100% de la pantalla, pero al cambiarlo, sigo teniendo el mismo problema...
puedes echarme un cable? Gracias anticipadas!
Hola Kulu,
Perdona en primera la demora y en segunda la ignorancia pero... ¿en qué sección llamas al lightwindow? dices que en Firefox no tienes problemas, sin embargo no encuentro en dónde oscureces la pantalla.
Navegando en tu página me apareció un error en el que dice que 'título' no está definido. Para quitarlo deberás cambiar este código:
-
<script language="javascript">
-
function muestraImagen(imagen, descripcion, autor)
-
{
-
myLightWindow.activateWindow({href: 'pelis/' + imagen, caption: titulo, author: 'Alain Bainée'});
-
}
-
</script>
Por el siguiente:
-
<script language="javascript">
-
function muestraImagen(imagen, descripcion, autor)
-
{
-
myLightWindow.activateWindow({href: 'pelis/' + imagen, author: 'Alain Bainée'});
-
}
-
</script>
Saludos.
Muchas gracias por tus tutoriales y por tu paciencia.
Asi es un placer aprender de los que saben y lo comparten.
Desde España, con amor.
Un abrazo
Hola xuaku,
Muchísimas gracias por tu comentario, es un honor.
Saludos a España, tierra a la cual estimo mucho aunque nunca he podido conocer.
Saludos.
Hola Carla tengo dias quebrandome la cabeza y no encuentro una solucion ya leei todo tu tutorial y mi problema es que quisiera llamar desde un boton en flash un archivo html usando ligthwindow... Compatible con IE y Firefox
Este es el codigo que uso para llamar desde el boton en flash un archivo html usando ligthwindow:
-
on (release)
-
{
-
getURL("javascript: myLightWindow.activateWindow({href: \'pages/contacto/contactoelectronico.html\', title: \'\', params: \'lightwindow_type=media,lightwindow_width=890,lightwindow_height=450\' });");
-
}
Este es el codigo que utilizo en m HTML:
-
<!-- CSS -->
-
-
-
-
<!-- JavaScript -->
-
-
-
-
-
-
-
function muestraVentana()
-
{
-
var pagina = window.location.href;
-
if(pagina.substr(0, 10) == "http://www")
-
myLightWindow.activateWindow({href: 'pages/contacto/contactoelectronico.html', width: 900, height: 500});
-
else
-
myLightWindow.activateWindow({href: ''pages/contacto/contactoelectronico.html', width:900, height: 500});
-
}
Ya tengo todos los archvivos js cargados en mi servidor..
Ya tengo el valor wmode en el html..
---------------------------
O Cual es codigo que necesito en html?
Afecta algo que desde la scena 0 en flash un
( Movi Clip ) llame a otro archivo swf posicionadolo 1 nivel arriba de la scena 0 y este a su ves en un boton llame la funcion relase con ligthwindow?
Tiene que ser todo en la scena 0 no tiene nada que ver?
Espero que me ayudes el objtivo es llamar desde un boton en flash un archivo html no una imagen..
MILL GRACIAS ESPERO TU MAS PRONTA RESPUESTA!!!
Hola Alan,
¿Con ese código la página no hace nada o te marca error o se muestra mal el efecto de lightwindow?
Lo primero que veo en el código de tu Flash es que mandas a llamar la función activateWindow del lightwindow; mientras que en tu HTML tienes la función muestraVentana que también se encarga de abrir el lightwindow. ¿Has probado llamar desde el flash la función muestraVentana?
-
on (release)
-
{
-
getURL("javascript:muestraVentana();");
-
}
El código de Javascript en tu HTML lo veo bien; si no funciona intenta poner el URL absoluto de la página, ejemplo:
-
function muestraVentana()
-
{
-
myLightWindow.activateWindow({href: 'www.tupagina.com/pages/contacto/contactoelectronico.html', width: 900, height: 500});
-
}
Saludos.
Hola Carla, primero muy bueno tu blog, ahora mi duda es, porque los ejemplos online de tu pagina los puedo ver, pero cuando bajo a mi PC los archivos, no me funciona el lightwindows, y puse todo tal cual en mi pagina para verlo y tampoco me funciona ni siquiera subiendolo a mi servidor, no me sale ningun error tampoco, simplemente no se habre!
Saludos.
Nicolas.
Hola, ahi lo hice funcionar, pero cuando pincho un boton, no se me obscurese la pantalla, solo me sale la ventana emergente... como puedo hacer para que me salga la pantalla?
Hola Nicolás,
Si no se te oscurece la pantalla es posible que te falten la imagen que se te utiliza de fondo para oscurecerlo.
Revisa que la imagen black.png exista en el directorio de images o bien que la hoja de estilos y/o el archivo de Javascript manden a llamar la imagen de forma correcta.
Saludos.
Hola. Está genial tu explicación y como ayudar a nuestros errores al aplicar el lightbox. Apliqué el lightbox a mi sitio, y funciona... pero se va a la izquierda, y antes estaba centrado. Leí que a alguien le pasó lo mismo, pero leí y leí, y al parecer en ningún lado alguien dijo cual era la solución. Si pudieras ayudarme te lo agradecería mucho...mucho...MUCHO.
Este es el link:
http://www.miniestudio.cl/renata/index.html
De antemano muchas gracias.
Jo.
Hola Julio,
Perdona la tardanza.
Primero que todo decirte que me encantó la página, están muy padres los dibujos.
No sé si ya habrás encontrado la solución a tu problema ya que en mi caso sí se muestra centrado, no veo que se vaya a la izquierda. Lo revisé tanto en Firefox como en Internet Explorer.
Saludos.
Hola Carla, excelentes tutoriales, gracias por publicarlos.
Mi cuestión es la siguiente. Aunque no tengo ninguna dificultad para realizar los pasos de los tuto, a pesar de que soy novato, cuando trato de abrirlos, se salta una alarma de seguridad del flash player del explorador y no me deja abrir los thickbox y lightwindow. Me podrias ayudar?, gracias.....
Hola Enrique,
Es posible que sea por la configuración de seguridad de tu Flash Player, puedes cambiar la configuración para que te funcione en local.
Prueba haciendo click con el botón derecho del mouse a tu swf que está incrustado en el HTML y luego dándole click al botón de Configuración... En la ventanita que te sale dale click en Avanzado... Si no tienes habilitado la opción de Configuración entra a http://www.macromedia.com/support/do...manager04.html y dale click a la opción "Panel Configuración global de seguridad" que está del lado derecho.
En esa ventana selecciona el botón de radio "Permitir siempre", luego en el combobox seleccionas Agregar... después en el botón de Buscar carpeta... y ahí buscas la carpeta en donde tienes tu archivos. Si tienes muchos Flash en la carpeta o en subcarpetas de Mis documentos te recomiendo que selecciones la carpeta de Mis documentos.
Saludos.
@Enrique: Qué bueno que te funcionó, te mando un saludo.
@Schrodinger: Gracias por tu comentario, siempre se agradece que se tomen la molestia en escribir =)
Hola Carla, me ha parecido interesantísimo tu artículo. Es la primera vez que lo pongo en práctica en una web que estoy haciendo para un grupo de música de unos amigos. Estoy teniendo problemas porque no me salen las imágenes al hacer clic, pero si que se oscurece el fondo ¿que estoy haciendo mal?
Muchísimas gracias y un saludo
Por cierto, la web en cuestión es http://www.devolver.co.cc
Gracias de nuevo por el tutorial y perdón por mi ignorancia (soy bastante nuevo con este tema)
Hola Carla... Muy bueno el tutorial, y, es evidente, fue la salavación para muchos de nosotros... Ahora, tengo una duda, tengo una galería hecha en flash, pero las fotos la sabro con el Lightwindow, quiero usar el "rel:'Galeria[categoria]'" para poder ir pasando a la siguiente o anterior imagen. Probé de agregarle el "rel" en el javaScript y en el AS pero nada... me da error siempre. Cual sería la solución a esto? Muchas gracias por estetuto y por responderme (en cuanto puedas). Saludos. Emiliano
Hola de neuvo Carla, todavía no pude resolver el problema de una galería de imágenes desde una base de datos y xml puedan verse una siguiente de la otra con el parámetro REL. Por otro lado, quiero usar el Lightwindow desde onload en el tag BODY y dice que "'MyLightWindow' es nulo o no es un objeto" sin embargo si lo pongo en un link normal funciona sin problemas. Qué puede estar pasando? Muchas gracias
Buenos dias he usado vuestro codigo para el scroll de imagenes y lo he modificado un poco, pero me encuentro que cuando sacas una foto de la tira de imagenes y colocas otra en su lugar hay algunas que pierden la opcion de boton ( no se activa como boton)
Hola Lue,
Verifica que la nueva foto tenga nombre de instancia (foto1, foto2, etc.).
Si observas el código, la instrucción que le da la acción a cada foto es similar a:
-
fotos_mc.foto1.onRelease = function() { getURL("javascript:muestraImagen('foto1.jpg', 'Descripción Foto #1');"); }
Saludos.
Saludos Carlita, mi nombre es Carlos (Charly para los amigos 
), quisiera felicitarte por este tutorial, neta que me hizo el superparo, despues de 21 hrs ininterrumpidas de estar buscando, encontre este tutorial y con 2 hrs mas, lo eche a andar... Pero sabes? tengo una duda, en la "franja" donde se despliega el campo "author", es demasiado grande, no aparece el dato, al inspeccionar el elemento con safari, me dice que tiene 1039px, no se de donde se configura ese tamaño, ya trate reconfigurando el lightwindow.css, pero ni asi... Ojala me puidieras orientar... Te dejo el Link por si le puedes echar un ojo para orientarme... http://www.mexicodirect.net
Muchisimas Gracias...
Olvide comentar que esta en la seccion DESTINATION...
http://www.mexicodirect.net/dest.html
Muchas Gracias...
Hola Carlos,
¿Quieres hacer menos alto la zona gris donde se muestra el autor o quieres que aparezca el dato?
Si quieres cambiar la zona sería en lightwindow.css en el estilo del div #lightwindow_data_details. Yo veo esa zona muy pequeña, no sé porqué en Safari te dice 1039px ¿o te refieres a toda la ventana del lightwindow?
Saludos.
Saludos Carlita:
Me refiero a la barrita, esta demasiado ancha, toda la ventana me aparece ok, los datos correctos y todo, el problema es la barra de "author", es demasiado ancha (1039px), pero no encuentro por que... Digo, no es muy importante, pero tengo un problema, a veces no puedo dejar de pensar en las cosas que no puedo resolver, y en este caso me sucede... Espero no ser molestia...
Muchas Gracias.,..
Hola Charly,
Lo siento, estoy bastante perdida. ¿Podrías subir un screen señalándome el área que quieres modificar?
Saludos.
Hola Carlita:
Aki de nuevo molestando... Te subo unas imágenes, la primera es como esta actualmente, la segunda es como se supone debería ser, pero ya probe configurando el Lightwindow.css, pero nada, no lo consigo...
Ojalá me des tu opinión o comienzo a pensar que son de aquellas cosas que tienen un misterio sin resolver...
http://www.mexicodirect.net/tmp
Muchas Gracias...
Hola carla, justo acabo de subir mi web a internet,y en galeria de fotos me gustaria poner el efecto lightbox, la web está hecha en flash, y no sé como empezar , el texto plano
donde tiene que ir puesto, si me puedes ayudar, he hecho unas pruebas con html en Dreamweaver y funciona pero con flash no tengo idea y tengo la cabeza tonta, gracias de antemano.
saludos y muchas gracias.
Hola Benet,
El primer código que dice Actionscript: va en el frame de tu Flash donde está el botón que debe oscurecer la pantalla. Los códigos que dicen HTML: deberán ir en el archivo HTML donde está incrustado el Flash.
Te recomiendo que bajes el archivo para que veas dónde va cada trozo de código o por lo menos que veas el código fuente de la página de ejemplo.
Saludos.
Buenas tardes, Carla, de nuevo te saludo y felicito.
Mira, yo he hecho ya efectos LightBox en páginas html para mostrar con ese efecto fotos de una galería o menús emergentes, tengo la librería de lightbox (effects, spectaculous y el otro archivo) yo imagino que el lightwindow es otro, traté de bajarlo y no pude.
Me encantó la idea de poder hacerlo desde flash. Hice todo pero no me funciona. La web que estoy haciendo sufrió cambios en la galería, ahora la cliente lleva cada categoría de su galería en html diferentes.Tengo 4 botones y cada uno llama a una html donde está el flash ejecutándose.
Cómo y dónde debo colocar el código para indicar que lo que cargo son html y no imágenes? (creo que cargar swf solos también me sirve). Podrás ayudarme? estoy perdiendo el cabello... es decir, me estoy quedando calva con esta página...
Hola Carla... te pregunto, quiero hacer en flash una galeria (ya le tengo) y funciona de maravillas con el thickbox, llamo desde flash la funcion y todo bien... lo que pasa es que quiero poder hacer que pase de imagen a imagen (atras y adelante) una vez que este abierto thickbox, (me explico?)...
me estoy quemando las pocas y nada...
hola Carla te cuento, estoy tratando de utilizar el thickbox pero tambien quiero utilizar el swffit.... y me anda uno u otro... como hago para que me funcionen los dos juntos???
Escribe un comentario
Nota: Es posible que tu comentario requiera autorización, si es así tu comentario será publicado a la brevedad. Gracias.
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.