Lightbox + SWF

1/sep/2006 129

Nadie niega el boom que ha tenido Lightbox y todos sus sucedáneos en la manera de desplegar imágenes inline, sin tener que utilizar popup. Ciertamente una de las mejores aplicaciones AJAX existentes. El problema que surge, es 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 (en el caso del Thickbox). Bueno, para solucionar esto, se deben hacer 2 cambios fundamentales: 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 querida película Flash. Vamos por partes:

En el OBJECT debemos aplicar un parámetro y un valor para la película Flash: wmode="opaque". Es conocida por muchos el parámetro wmode="transparent", pues ésta nos permite que las zonas que no tienen fondo en la película Flash se transparente, dejando ver el fondo del HTML que lo contiene (sea éste color plano, o una gradiente, o una foto, etc), similar a una película PNG Transparente (precisamente trabajando con el canal de transparencia, el canal alpha). Con opaque, la película Flash se esconderá detrás de cualquier elemento, sea éste HTML o controlado por Javascript. Por lo tanto, el HTML que llama el SWF sería:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" 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" type="application/x-shockwave-flash" wmode="opaque"></embed>
</object>

Como mencioné, se 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, por ejemplo, cuando una imagen pasa por debajo de un texto (el <img> tiene un z-index inferior al <p> del texto), o si queremos que la imagen pase por encima del texto (el z-index del <img> será superior al z-index del <p> del texto). ¿Se entiende? Ojalá que sí, aquí pueden ver un ejemplo gráfico de ello. bueno, lo que haremos entonces es reforzar el wmode="opaque" que debería pasar ya detrás del Lightbox, con el z-index (exagerado) de -999, y el CSS del Lightbox ya viene con un z-index de 100; El CSS del DIV contenedor del SWF sería:

#flash {
   z-index: -999;
}

Ver ejemplo con Lightbox

Comentarios

  1. Pablo [#]

    Cómo debo hacer para llamar a la funcion lightbox desde un flash?
    Encontré una forma de hacerlo creando un link vacio con un id… y a traves de una funcion de javascript llamada desde flash el lightbox se abria, pero sin el caption text.
    Tienes idea de como podria ejecutar el lightbox con caption text?

    Puedes ver la funcion que te comento en este link:
    http://www.huddletogether.com/forum/comments.php?DiscussionID=99&page=1#Item_0

  2. CSSLab Admin [#]

    caption text te refieres con el title=””? Trataste agregandolo en el link del HTML?
    <a id="dummyanchor" href="" rel="lightbox" title="" ></a>

  3. Roger [#]

    En Linux con Firefox no me anda..

  4. Danny A. Vasquez [#]

    Excelente ayuda… Me sirvio este articulo porq estoy montando mi pagina y tenia problemas al utilizar el Lightbox puesto q tengo una animacion flash, y era incomodo, sin embargo lo que hice fue agregar este parametro “wmode” value=”opaque”, con dreamweaver al flash y no tuve q hacer mas nada

  5. CSSLab Admin [#]

    esa es la idea, ayudar 😀

  6. Ismael [#]

    Excelente dato! Con esta te pasaste, arriba CSS Lab!

  7. Andy Sanchez [#]

    Muy Bueno y interesante Muchas Gracias… aunque hay un Script que tiene el Macromedia Dreamweaver que hace que la Etiqueta Div que llama la Clase Flash que no permite que funcione el parametro en el Object usen el Fixit.js

    Hasta Luego

    Gracias

  8. CSSLab Admin [#]

    Andy, existe otra tecnica para llamar SWF sin utilizar un JS (el cual tb es una opcion valida). echale una leida al articulo de A List Apart.

    BERENICE: no entendi nada de lo q escribiste.

  9. ArdiIIa [#]

    Gracias, me ha sido de mucha utilidad

  10. ArdiIIa [#]

    Una pena, en FIREFOX no se ve bien…

  11. CSSLab Admin [#]

    FF 1.5 si se muestra super bien, quizas necesites actualizar tu browser.

    saludos.

  12. Pablo [#]

    el ejemplo me andubo de 10 con el explorer…
    hay alguna manera de que funcione bien con Firefox?…
    desde ya gracias

  13. CSSLab Admin [#]

    funciona bien en todos los browsers q probe pablo, revisa bien. saludos.

  14. pioja [#]

    en opera todo bien, pero en ie no funca

  15. almavid [#]

    Funciona bien con IE6, FF 2.0.0.2, OP9.0
    Menudo invento este del LB…!

  16. Daniel H. [#]

    Son las 1:55am y CSS lab me ha ayudado a dormir unas 4 horas o mas , ya habia utilizado lightbox , pero no habia tenido ese problema con los swf , hasta ahora , gracias…..

    :) CSS Lab , nice Blog..

  17. Monica [#]

    Me sirvió de mucha ayuda y va perfecto, gracias!!

  18. Alfonso [#]

    Muchísimas gracias, está muy bien explicado y me ha sido de una gran ayuda

    Felicidades por la web, es magnífica!

  19. Fokker [#]

    Otra opción que he visto es en el css en vez de decirle al flash que se vaya a un z-index negativo decirle al lightbox que se vaya al z-index 999, creo que es un poco mejor porque solo se setea en un elemento, en cambio elementos flash pueden haber muchos. En http://www.tabanotv.cl lo tengo seteado de ese modo y ya no molesta el flash de la izquierda.

    Saludos

    PS: Para el admin, la etiqueta que despliega el menu superior se corre hacia abajo cuando el ancho de la ventana es de alrededor de 800px.

  20. CSSLab Admin [#]

    Fokker, la idea de de que el swf y el css del lightbox tengan z-index tan opuestos, es solamente reforzar a que se comporten de esa manera, ya que con wmode=”opaque” debería de funcionar. creo q es mejor agregarle igual el z-index en el css, no cuesta nada ser reiterativo pero con los browsers uno nunca sabe.

  21. Alexis [#]

    A mi cuando carga la imagen el lightbox el swf que está por detras
    me desaparece…
    aun cambiando el parametro.. agragando un div…desde ff, desde ie…
    nada,….

  22. Andres Path [#]

    Hola, he estado usando esto en mi hoja de estilo:

    div#bean{
    position: fixed;
    right: 0;
    bottom: 0;
    display: block;
    height: 234px;
    width: 150px;
    background: url(‘/bean.gif’) bottom right no-repeat;
    text-indent: -999em;
    text-decoration: none;
    }

    con lo cual puedo poner una imagen en la esquina inferior derecha de la pantalla, esto añadiendo la etiqueta en mi documento html, AHORA MI CONSULTA ES : COMO HAGO PARA QUE EN VEZ DE QUE SE VEA UNA IMAGEN, SE VEA UNA PEQUEÑA PELICULA FLASH??

    Si alguien puede ayudar se lo agradeceria.
    Atte Andres

  23. grmn [#]

    Hola, muy bueno, pero no me esta funcionando, y creo que es porque tengo la película flash dentro del script de Dreamweaver para quitarle el marco del IE, entonces mi pregunta es como y donde inserto el parametro wmode dentro del JS que genera dreamweaver???

    Saludos y Gracias
    grmn

  24. Jordi [#]

    En la siguiente web que estoy haciendo he seguido las instrucciones y ahora cuando le doy a una new me sale el thickbox y desaparece el swf, pero la pregunta es como hacer que se vean los banners swf por detrás, lo he visto en algun site. Gracias por adelantado.

  25. CSSLab Admin [#]

    jordi, probaste el wmode=opaque ??? ponles a tus banners tb el z-index…..

  26. Andy Sanchez [#]

    CssLab Cómo debo hacer para llamar a la funcion lightbox desde un flash?
    Necesito esa funcion encontre algo como esto

    function show(image) {
    var a = document.getElementById(“ancoraggio”+image+””);
    var f = new Array()
    f[1] = “photoerga/images/image-1.JPG”;
    f[2] = “photoerga/images/image-2.JPG”;
    f[3] = “photoerga/images/image-3.JPG”;
    f[4] = “photoerga/images/image-4.JPG”;
    var url = f[image];
    a.setAttribute(‘href’, url);
    myLightbox.start(a);
    }
    Pero cuando lo llamo desde el SWF me dice q myLightbox no esta definido Si alguien puede Ayudarme en eso Gracias….

  27. CSSLab Admin [#]

    Andy, he estado usando thickbox (q usa jquery) y con el he podido hacerlo ser activado desde una pelicula Flash. Mira el sgte link y veras como.

  28. Roberto Sanchez [#]

    Alguien podría ayudarme? he seguido las instrucciones e inclusive he visto el ejemplo que se muestra pero no lo he conseguido. He visto el codigo fuente del ejemplo y segun yo esta igual. Ya no se que hacer, el flash que esta debajo del lightbox desaparece cuando hago click y luego vuelve a aparecer cuando cierro. Uso lightbox 2, tendra algo que ver? Saludos

  29. CSSLab Admin [#]

    Roberto, danos tu URL para ver q podria estar pasando.

  30. Roberto Sanchez [#]

    O mejor aun, habra forma de que pongan los archivos del ejemplo para fines educativos… incluyendo los .js, .css, etc,??? :-) gracias de antemano

  31. Roberto Sanchez [#]

    Wow no crei que respondieran tan rapido jeje. Pues te cuento que aun no he subido nada a internet, solo he hecho pruebas localmente… :(

  32. Roberto Sanchez [#]

    Acabo de subir lo que estoy haciendo. Les dejo el link.
    http://www.larraga.com.mx/lightbox/index.html
    Saludos

  33. CSSLab Admin [#]

    Roberto, baja todo lo q necesites directo pinchando aqui.

  34. CSSLab Admin [#]

    Ya vi lo tuyo Roberto y el problema esta en la version de lightbox o de prototype. trata de bajarlos denuevo o del ejemplo q hice directo, los reemplace y funciono perfect. Suerte.

  35. Roberto Sanchez [#]

    Listo, despachado, ya esta :) baje los archivos que pusiste y todo bien.
    Bendiiitooo Benditooo jeje. Muchisimas gracias por tu ayuda.
    Saludos!

  36. CSSLab » Validando el CSS de Thickbox [#]

    […] Durante un proyecto en específico se deció utilizar Jquery como framework para todo lo que fuera Javascript. Reticente (ya que en ese entonces me animaba con Prototype y Script.aculo.us), comencé a utilizarlo y me fascinó como tenía grandes prestaciones, al momento de modificar el código HTML antes de ser renderizado. Se podían inyectar classes, ID’s y otros elementos dentro del código muy facilmente, lo que me hizo encariñarme con él. Para efectos, no se quedaba atrás (aunque en mi opinión, un poco toscos) y determinamos utilizar Thickbox para evitar los ya obsoletos pop-ups para abrir imagenes y nuevas ventanas dentro de la misma pagina (les había comentado hace mucho de lightbox, pero éste funciona con Prototype). Enfin, Thickbox es muy bueno para lo que hace, pero teníamos un pequeño gran problema: el cliente requería que todo el CSS validara. Y Thickbox tiene 3 propiedades que de por sí no validan y que son muy importantes: dan la trasparencia a la ventana. Ya las comentamos anteriormente en un artículo sobre transparencias: opacity, -moz-opacity y filter: alpha(). Opacity valida sólo en CSS3 (aún en desarrollo), -moz-opacity es propietario de Mozilla y no valida, y filter: alpha() es un invento de Microsoft y menos aún valida. […]

  37. Roberto Sanchez [#]

    Hola soy yo otra vez… :)
    Alguien sabe porque me aparece la barra que blokea los contenidos Active X en Internet Explorer 7 y como evadir este problema?

  38. CSSLab Admin [#]

    Roberto: eso lo hace microsoft como ‘proteccion’. Usa JS para desactivarlo. Suerte.

  39. Carlos Molina [#]

    Excelente señores gracias

  40. Richard Medina [#]

    Excelente el artículo, me ha solucionado un problema que me tuvo un par de horas 😛
    Gracias!!

    nota: recomiendo que usen swfobject para poner flashs en un div.

  41. Hugo [#]

    Muy buen aporte, de verdad me fue muy útil.

  42. Flashreloco [#]

    excelente articulo, hace tiempo que me estaba preguntando como arreglar ese tipo de problema.

    Muchas gracias.

    😀

  43. fer [#]

    No sé si es posible, pero te agradecería me cuentes (email o cómo sea, me estoy volviendo loco) cómo conseguir la transparencia del lightbox al desplegarse sobre flash, como en tu ejemplo. En mis pruebas, al desplegarse el overlay, desaparece el flash que hay debajo (desde donde lo llamo). Gracias 😉

  44. Diego Celedón [#]

    Excelente artículo muchas gracias, pero creo que no entendí como hacerlo en caso de firefox ya que me funciona solo con explorer. El lightbox queda detras del flash en firefox. De antemanos, gracias por su ayuda.

  45. Cristian [#]

    Excelente solución, felicitaciones. Por ahi alguien comento que no le funcionaba en Firefox. Lo que pasa es que te olvicdaste resaltar de color ROJO el wmode=”opaque” que esta en el
    Saludos a todos.

  46. Chucky [#]

    Excelente solución, felicitaciones. Por ahi alguien comento que no le funcionaba en Firefox. Lo que pasa es que te olvicdaste resaltar de color ROJO el wmode=”opaque” que esta en el “embed ”
    Saludos a todos.

  47. rodrigo Polidura [#]

    Hola
    estoy trabajando en este sitio http://www.eldante.net , tiene un player de audio en flash y le aplique el codigo pero igual cuando abro una foto con lightbox me tira el flash al fondo de la pagina.

    saludos y gracias de antemano

  48. CSSLab Admin [#]

    rodrigo, lo veo bien en safari 2 y ff 2. especifica tu problema a ver q onda. salud.

  49. Alejandro Sanahuja [#]

    Hola, mirad, estoy haciendo una galeria de interiores para la web de mi empresa, pero hay un problema que solo me pasa con internet explorer.

    Tenia las imagenes a una resolución de 1024, pero quiero que esten a 800X600, pero en el IE al cambiar el tamaño, el marco blanco no cambia, sigue con una resoluciñon de 1024.

    Ayuda por favor. Gracias.

  50. CSSLab Admin [#]

    Alejandro, no sera la memoria cache de tu browser?

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab