Abrir Lightbox desde Flash


Hace tiempo encontré este ejemplo en la página de clipdepelicula , con el cual podemos abrir una imagen desde Flash por medio del ya famoso efecto Lightbox, lo único que se tiene que hacer es poner este código entre las etiquetas head:

<script type=”text/javascript”>
function LightboxDelegate(url,caption) {
var objLink = document.createElement(‘a’);
objLink.setAttribute(‘rel’,’lightbox’);
objLink.setAttribute(‘title’,caption);
Lightbox.prototype.start(objLink);
}
</script>

…y en las acciones del botón flash que abrirá la imagen colocar este código, soy consiente que desde la versión de Flash 8 se prohibió el uso de javascript desde los botones, pero bueno a alguien le puede ayudar:

on (release){
getURL(“javascript:LightboxDelegate(‘images/image-1.jpg’,’caption1′)”)
}
Básicamente lo que hace el codigo es mandar a llamar a la función LightboxDelegate y pasarle los parametros de la dirección donde se encuentran las imagenes y el titulo descriptivo de esa imagen.
Algo que le falto mencionar a clip de pelicula en este ejemplo,  es el problema que surge, cuando lo utilizamos en conjunto con un SWF: esta película suele ponerse adelante del Lightbox, y no deja visualizar bien la imagen o el contenido que estamos desplegando.
Para eso me puse a investigar un poco y encontre la solución en la página de csslab , donde dan una solución muy sencilla.
Para solucionar esto, se deben hacer 2 cambios: uno en el OBJECT que llama el SWF y uno en el CSS del contenedor de este SWF; en el caso de no tenerlo, es preferible crear un DIV que sólo contenga nuestra película Flash.
1.- En el OBJECT debemos aplicar un parámetro y un valor para la película Flash: wmode=”opaque”.( Con opaque, la película Flash se esconderá detrás de cualquier elemento, sea éste HTML o controlado por Javascript.)
<object classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0&#8243; width=”300″ height=”200″>
<param name=”movie” value=”csslab.swf” />
<param name=”quality” value=”high” />
<param name=”wmode” value=”opaque” />
<embed src=”csslab.swf” width=”300″ height=”200″ quality=”high” pluginspage=”http://www.macromedia.com/go/getflashplayer&#8221; type=”application/x-shockwave-flash” wmode=”opaque”></embed>
</object>
2.-Crear un DIV que contiene nuestra película Flash. Este DIV contendrá, en este caso, un z-index=-999; (Para quienes no conocen, la propiedad z-index determina el orden, o relevancia en que un elemento designado tendrá sobre otro.)
El CSS del DIV contenedor del SWF sería:
#flash {
z-index: -999;
}
Y listo, con esto tendremos arreglado todo nuestro problema que nos pudiese causar el Lightbox, les dejo el ejemplo ya arreglado con estos tips.

trace( “hasta la próxima”);

Anuncios
Abrir Lightbox desde Flash

2 comentarios en “Abrir Lightbox desde Flash

  1. javi•z7 dijo:

    Hola flashreloco, me pregunto si me podrás ayudar, he llegado al punto del código que señalas en tu comentario:

    on (release){
    getURL(”javascript:LightboxDelegate(’images/image-1.jpg’,’caption1′)”)
    }

    Pero necesito que mi vínculo en flash, me abra todo el roadtrip de una carpeta de 4 imágenes, sin víncular ninguna de las otras a ningún elemento en el flash, vinculando unicamente la primera.
    Imagino que habrá que indicarle a ese código que lo haga, pero no se cómo…

    ¿me puedes dar algún consejo?
    Gracias de antemano por tu ayuda

  2. Hola que tal, tengo flash 8 y no me deja hacer el lightbox, seguramente lo estoy haciendo mal, ya copie ese fragmente en el head de la pagina q se encuentra el flash y el otro en el boton q quiero q muestre luego la imagen completa, pero no se en q me estoy equivocando.Desde ya muchas gracias

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s