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. Roberto [#]

    Por mucho que modifico y compruebo el código no consigo que se vea en el fondo el flash el ligthbox se pone encima de la pelicula y no se ve nada, sin embargo he probado a poner texto y el texto si se ve bien de fondo. Idea?

  2. CSSLab Admin [#]

    Roberto: publica la url directa en los foros y aver si puedo verlo. saludos.

  3. Roberto [#]

    Lo siento pero aun no lo tengo subido lo estaba probando en local.
    Lo que me ocurre es lo tipico que el texto y el html si que se ve detras de lightbox pero el cacho de flash no

  4. Rafa [#]

    No solo está muy bien explicado sino que además funciona perfectamente

  5. JUlio [#]

    Muy buenas respuestas

  6. Fernando [#]

    Estimados. Alguien sabe como llamar a LightBox desde Flash para que muestre mas de una imágen?. Hasta ahora he encontrado tutoriales que muestran como visualizar pero tan solo una sola imágen. (Si es utilizando SWFObject, mucho mejor). Desde ya, muchas gracias.

  7. Jhorilyn Benitez [#]

    Alguien podría ayudarme? Disculpa pero estoy utilizando el script del Lightbox que ustedes tienen el la pagina pero cuando hago clic en la foto el swf se desaparece. Pueden ver lo que me esta sucediendo el siguiente link: http://www.conselsor.com/prueba_fotos/index.html

  8. Percy [#]

    Como Puedo hacer un lightbox a un flash?

  9. Pavel [#]

    Alguien podría ayudarme? Disculpa pero estoy utilizando el script del Lightbox que ustedes tienen el la pagina pero cuando hago clic en la foto el swf se desaparece. Pueden ver lo que me esta sucediendo el siguiente link: http://www.conselsor.com/prueba_fotos/index.html

  10. Jordi [#]

    Hola a todos. Yo tengo un grabe problema social. Estoy abriendo un lightbox, lo jodido es que funciona perfectamente en firefox, pero no hay forma de que funcione en IE. Le he metido el z-index del “lightbox.css” a 900 (para forzar que sea superior), y en mi hoja de estilos del html, he creado:

    #flash{
    z-index: -900;
    }
    No sé que hago mal. Y no comprendo porqué funciona bien en firefox y no en IE… No sé ya qué hacer. Muchas Gracias a todos.

  11. Jordi [#]

    No os preocupeis. jeje, solucionado.

    De todas formas, gracias a quien se haya molestado en leerme!

  12. Slak [#]

    no me funciona con IE, solo con firefox… cual es la solucion?

  13. Damocles_ [#]

    hola, q tal, es la primera vez q voy a usar lightbox. Estoy diseñando un sitio totalmente en flash y en la parte de fotografias quiero poner un boton pequeño (thumb) q sería una foto q al cliquearla se abriria el lightbox, ahora sí me pueden decir los pasos a seguir se los agradeceria mucho.
    gracias

  14. Atitobr [#]

    Dejo esto aquí, por que estaba lidiando con este mismo problema y encontre una solución para Explorer 6 y para Firefox 2 .
    Para que funcione, puse el swf , dentro de un div y a ese div le di la propiedad “z-index:-999″ con la hoja de estilos(se puede hacer embebiendo el código css en el html tambien, ).

    Para explorer:
    hay que agregar un parametro dentro del la etiquet que seria ….

    PAra Firefox, hay que agregar la misma propiedad pero a la etiqueta <embed .Seria así:

    Combinando las dos, logre que funciones para ambos navegadores.
    Espero que les sirva. salu!

  15. Atitobr [#]

    Dejo esto aquí, por que estaba lidiando con este mismo problema y encontre una solución para Explorer 6 y para Firefox 2 .
    Para que funcione, puse el swf , dentro de un div y a ese div le di la propiedad “z-index:-999″ con la hoja de estilos(se puede hacer embebiendo el código css en el html tambien, style=”Z-index:-999″ ).

    Para explorer:
    hay que agregar un parametro dentro del la etiquet que seria ” param name=”wmode” value=”opaque” “….

    PAra Firefox, hay que agregar la misma propiedad pero a la etiqueta <embed .Seria así:

    Combinando las dos, logre que funciones para ambos navegadores.
    Espero que les sirva. salu!

  16. Lanis [#]

    Hola, quisiera saber como exportan la película el swf, coloco lo que dicen e igual me oculta el swf.
    Agradezco su ayuda

  17. Ramm [#]

    Con Firefox en Mac, se desaparece por completo el flash, esto es lo que se supone debe suceder?

  18. Julia Hokama [#]

    BUenos noches amigos tngoun problema y es que no logro conseguir recuperar las imagenes por medio del lightbox
    si alguien me daria una mano se los agradeceria mucho…

    Muchas gracias

  19. Jorge Epuñan [#]

    Ramm: si tb me sucede con FF2 para mac, es un problema de essta version con la interpretacion de z-index…

  20. angela [#]

    hola me llamo angela disculpa estoy buesando informacion de lightbox..! pero osea no se que se utiliza alguna codificacion me podrias ayudar?

  21. jose roberto (vevni) [#]

    informacion de que tipo? sobre como implementarlo? es muy facil, solo cargas la libreria y su hoja de estilo, agregas un enlace y pones la clase del lightbox, si quieres que haya relacion en las fotos, agrega el atributo rel y listo, para que salga el boton de sig.

  22. matias_ [#]

    weanassss, tengo un lio barbaro en mi cabeza, les cuento, estoy haciendo un sitio totalmente en flash ( con level) o sea la pag. principal que esta en el index, y cliqueando en la botonera llama a otro pag.(level2) en donde a aparecen las fotos que quiero que tengan el lightbox, ahora como se hace, si influye que tenga level?, estoy mirando varias web de este tipo (de ayuda) y no encontre ningún ejemplo como lo mío( espero no no se entienda mal).
    bueno espero que me tiren un cable a ver si termina bien…
    salu2

  23. Jorge Epuñan [#]

    matias_, el uso de JS es aparte de lo q haga el flash con sus _level, no deberian de innterferir, ya q el lightbox por ejemplo se abre desde el html, no desde el flash. suerte.

  24. Ivonne [#]

    Hola! te agradezco de antemano el tutorial que has creado ya que el dolor de cabeza que me ha generado este problema es terrible, jejejej, y aun no lo puedo resolver, he seguido paso a paso lo que tu dices y aun asi desaparece el flash, te dejo la direccion de prueba del sitio:
    http://www.corporactiva.cl/fotografia/indexcopia.html

    Saludooos!! y ojala me puedas ayudar.

  25. DIEGO [#]

    para todos los que se les desaparece el swf utilizando el lightbox
    la forma que encontre es cambiar un parametro dentro de uno de los archivos .js en mi caso era el archivo lightbox.js, solo tuve que cambiar un parametro de ‘hidden’ a ‘visible’. utilizen tambien el parametro opaque o transparent en el wmode, espero les sirva
    GRACIAS MATIAS!!

  26. Lidia [#]

    Mil gracias…me salvo un dolor de cabeza mayor este enlace…Es de gran ayuda y completamente correcto.

  27. Nelson [#]

    Mil gracias, acabas de salvarme horas de trabajo, la explicación es perfecta.
    Gracia de verdad.

  28. Mauricio [#]

    Que tal , excelente lo que mencionas. Pero no se si pudieras aclararme algo con respecto a la “transparencia” o “opacidad”… a que me refiero, pues resulta ser que al mandar llamar el lightbox, si lo logra, solo que quisiera que se viera como tu ejemplo que se ve opaco en color obscuro, a mi me lo da como si fuera blanco o luz. No se que valor mover para que me de el resultado que tu tienes

    este es el ejemplo (esta dentro de el segundo boton osea “architecutural rendering”)

    http://www.duplika.com.mx/arkimedia/

    y quiero que se vea asi

    http://www.csslab.cl/ejemplos/lightbox/flash.html

    mmm muuuchas gracias de antemano y mientras seguire moviendo valores, como dicen por ahi , hechando a perder se aprende jajaja

    Saludos

  29. Lightbox con flash « ddsign [#]

    […] Lightbox + swf (CSS Lab, nos da la corrección a una serie de problemas que pueden surgir cuando aplicas lightbox en archivos con swf) […]

  30. matias_ [#]

    hola mauricio, me gustaria si es posible me pesaras el .fla ya que me es imposible sacarlo este light box.
    mi correo es matbalbi@hotmail.com.
    desde ya gracias por cualquier ayuda que me puedas dar.

  31. Arebennian [#]

    exelente me dieron una buena salvada con lo del thickbox… estaba preparando una paina con su bonita cabecera en flash, pero en la seccion de la galeria tenia pensado usar shadowbox. el problema es que shadowbox tiene un script que lo hace inicar al cargar la pagina y eso hacia desaparecer mi lindo flash…

    la solucion thikbox… es bastante mas simple

  32. Tony [#]

    Que tal, como están.
    Paso a comentarles el inconveniente que tengo con swf y lightview.
    En un blog que estoy armando para mi web, tengo el problema de los swf que “tapan” una galeria en lightview (similar a lightbox).
    El blog está basado en WordPress 2.6.2 / 2.6.3
    El tema utilizado es Bella (http://wpglamour.com/).
    Hasta acá todo bárbaro. Lo bueno de este tema es que utiliza un archivo swf para imprimir en pantalla los títulos con una tipografía específica (que no es común en las computadoras) mediante javascript.
    Pero al aplicar lightview los títulos “tapan” la galería que despliego.
    Hace dos días estoy intentando “desentrañar” la solución: cambié configuraciones “wmode” y “z-index” en todas sus variantes tanto en los archivos javascript y css del tema de wordpress, como también en el mismo archivo css de Ligthview, sin embargo no encuentro la solución.
    Ya intenté tanto con IE7 como con Google Chrome, limpiando temporales desde los navegadores y con CCleaner, pero nada.
    El archivo que invoca el código del tema de wordpress se llama sifr.swf
    Me parece un desafío, y por este motivo voy a seguir investigando como solucionarlo.
    Ya publique un post en la web del autor del tema, pero aún no tuve respuesta, y mientras espero, averiguo por mi cuenta y lo comparto con Uds.
    Si alguien encuentra la solución, desde ya estoy muy agradecido.
    No soy programador, pero estoy aprendiendo y la verdad que es tan apasionante como doloroso conocer el código de una página… jajaja…
    Saludos y agradezco de antemano.
    CSSLAB: Excelente página!!! Muy buen aporte a la comunidad!!! 😀

  33. Tony [#]

    Olvidé pasar el link al que hago referencia (el blog)

    http://www.aiteok.com.ar/blog

  34. Antonio [#]

    Hola, tengo el mismo problema que Tony, ¿alguien supo cómo hacerlo? también requiero de esa solución, porque en Explorer tapa por completo sin ninguna transparencia y cortando la música de fondo, además también lo vi en Safari y este queda detrás de la web.

  35. Beas [#]

    Hola! No puedo ejecutar el lightbox desde flash. Quise bajar los ejemplos que le dieron a Roberto Sanchez pero no hay nada. Me podrian pasar los ejemplos para ver el codigo?? Gracias.

  36. mabel [#]

    Tengo el mismo problema que Roberto Sanchez, no consigo semi transparencia cuando se abre lightbox.. podrian volver a subir los js de ejemplo?

  37. mabel [#]

    Hola amigo mira hay un archivo llamado lightbox.js en el hay un script pequeñito
    que oculta todo lo que sea flash lo q hay q hacer es cambiarlo a visible y listo

    Código:

    function showFlash(){
    var flashObjects = document.getElementsByTagName(“object”);
    for (i = 0; i < flashObjects.length; i++) {
    flashObjects[i].style.visibility = “visible”;
    }

    var flashEmbeds = document.getElementsByTagName(“embed”);
    for (i = 0; i < flashEmbeds.length; i++) {
    flashEmbeds[i].style.visibility = “visible”;
    }
    }

    // —————————————————

    function hideFlash(){
    var flashObjects = document.getElementsByTagName(“object”);
    for (i = 0; i < flashObjects.length; i++) {
    flashObjects[i].style.visibility = “visible”;
    }

    var flashEmbeds = document.getElementsByTagName(“embed”);
    for (i = 0; i < flashEmbeds.length; i++) {
    flashEmbeds[i].style.visibility = “visible”;
    }

    }

  38. Roxana [#]

    Gracias, me funciono perfectamente sin utilizar el css

  39. Andresuti [#]

    perfecto, pro en ff se relentiza la animación, estoy utilizando slimbox.
    alguna solución??
    gracias

  40. Hugo [#]

    Tengo problemas con swf+lightbox, seguí las recetas que ustedes dan y va bien en Explorer pero en Firefox y Chrome el swf me aparece por arriba del lightbox, me podrán ayudar, gracias, Hugo

  41. AlePhotoshop [#]

    quería hacer que el link donde se abra el lightbox esté dentro del swf ¿alguien sabe como debo armar el link para que me lo tome?
    Gracias de antemano

  42. Jorge Epuñan [#]

    AlePhotoshop: quizas este link te sirva.

    exito!

  43. Diego Rojas [#]

    Hola soy un webmaster principiante, y desarrollo mi webste con XHTML + SWF+ CSS y hace poco agrege uno lightbox, pero me causaba problemas con los SWF ya que esos aparecian encima, encontre soluciones como las que muetra la web, pero ay un pequeño detalle que nadie menciona y genera errores con los Z-INDEX cuando ejecuta el lightbox en algunos navegadores. El codigo usual de un objeto en SWF con el WMODE modificado seria este…

    CODIGO:

    Ahora fijence que empieza y termina en la etiqueta OBJECT, la propiedad WMODE fue insertada como parametro, pero para hacerla mas notoria (o fuerte) la incluimos en EMBED. Lo curioso es que luego le hice pruebas en varios navegadores y en algunos ocurrian errores como el Firefox donde el Ligthbox seguia debajo de los SWF. Eh aqui el truco…

    Antes de la etiqueta OBJECT con el swf en si, existe una etiqueta SCRIPT para el plug-in, en esta etiqueta mencionan los parametros que respeta el plgu-in en carga como width, height, title, etc; antes de cerrar la etuqueta con añadi las funciones faltantes, ya que en el OBJECT colocamos el parametro WMODE, tambien lo agregamos en los parametros del plug (o AC script) y mecionamos ‘wmode’, ‘opaque’ como lo muestra el codigo:

    AC_FL_RunContent( ‘codebase’,’http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0′,’width’,’955′,’height’,’755′,’title’,’Devil Designes Studio’,’src’,’studio’,’quality’,’high’,’pluginspage’,’http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash’,’movie’,’studio’, ‘wmode’,’opaque’); //end AC code

    estos paramtros van ligados directamente con los Z-INDEX de toda la pagina.

    Espero les sirva. Saludos

  44. Alejandro [#]

    GRACIAS DIEGO ROJAS!!!!!

  45. LightBox encima de Flash [#]

    […] Read more from the original source: LightBox encima de Flash […]

  46. Jonatan [#]

    No me funciona el swf siempre me lo muestra por encima de todo., e hice todo como decia el tutorial(*-*)

  47. José Ramón León [#]

    Trucazo este del opaque, lo cachondo que lo tienes posteado desde el 2006, y mirá que le he metido horas a la vaina esta, y el transparent si que me había tocado, pero el opaque ni de palo jejeje.
    Muchas zenkius, me has alegrado la mañana con el post, moola! ;-).

  48. Hugo [#]

    Graciasssssssssssssss, tenía un problema con algo parecido y no encontraba como solucionarlo, gracias!

  49. bea79 [#]

    Botones flash + lightbox problemas
    Stoy haciendo una web toda en flash, la cual la seccion galeria tiene botoncitos que al apretarlos se abre Lightbox con la galeria. Funciona perfecto en FF de Mac, Internet explorer, safari y Opera, pero en FireFox de PC no hay manera….a alguien le ha pasado lo mismo?? paso el link a ver si alguien me puede echar una mano…stoy dandole vueltas a la cosa y ya no se que hacer….
    En el boton galeria…
    http://www.ermestudio.es
    Muchisisimas gracias de antemano!!
    un saludete 😉

  50. Lucy [#]

    Super!!! ke buen aporte, justo lo que buscaba, gracias.

Deja tu Comentario

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

CSSLab