I'm looking for new horizons... for more information, click here!

CSSLab.cl

Lightbox + SWF

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



  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 :D

  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. 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?

  37. CSSLab Admin

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

  38. Carlos Molina

    Excelente señores gracias

  39. Richard Medina

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

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

  40. Hugo

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

  41. Flashreloco

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

    Muchas gracias.

    :D

  42. 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 ;)

  43. 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.

  44. 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.

  45. 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.

  46. 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

  47. CSSLab Admin

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

  48. 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.

  49. CSSLab Admin

    Alejandro, no sera la memoria cache de tu browser?

  50. 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?

  51. CSSLab Admin

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

  52. 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

  53. Rafa

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

  54. JUlio

    Muy buenas respuestas

  55. 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.

  56. 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

  57. Percy

    Como Puedo hacer un lightbox a un flash?

  58. 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

  59. 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.

  60. Jordi

    No os preocupeis. jeje, solucionado.

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

  61. Slak

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

  62. 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

  63. 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!

  64. 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!

  65. Lanis

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

  66. Ramm

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

  67. 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

  68. Jorge Epuñan

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

  69. angela

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

  70. 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.

  71. 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

  72. 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.

  73. 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.

  74. 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!!

  75. Lidia

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

  76. Nelson

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

  77. 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

  78. 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.

  79. 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

  80. 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!!! :D

  81. Tony

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

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

  82. 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.

  83. 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.

  84. mabel

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

  85. 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”;
    }

    }

  86. Roxana

    Gracias, me funciono perfectamente sin utilizar el css

  87. Andresuti

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

  88. 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

  89. 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

  90. Jorge Epuñan

    AlePhotoshop: quizas este link te sirva.

    exito!

  91. 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

  92. Alejandro

    GRACIAS DIEGO ROJAS!!!!!

  93. Jonatan

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

  94. 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! ;-).

  95. Hugo

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

  96. 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 ;-)

  97. Lucy

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

  98. margarita

    La solucion de Mabel de sustituir el hidden por visible en el archico lightbox.js es lo que me ha funcionado.
    Mil gracias!!

  99. rené

    Hola gente quizás ustedes puedan ayudarme con una duda de lightbox…resulta que he probado varios clones que soporten flash e imaegenes, pero no he conocido ninguno que no de problemas al momento de validar el sitio..ustedes saben como lo puedo hacer? existe alguno? alguna maña para solucionar esto? mostarlo dentro de un iframe quizás?…saludos

  100. Jorge Epuñan

    René: depende a q nivel necesitas la validacion; si es solo por HTML no deberias tener problemas ya q el codigo de la gran mayoria de las modales las inyecta luego q el DOM inicie; si es a nivel de CSS estas con problemas ya q se necesitan varias propiedades q no son validables.

    Porq no tratas de hacer la tuya propia?

    Saludos.

  101. rené

    Hola Jorge gracias por la respuesta…es para validar el html, la verdad es que yo soy novato en esto, el asunto es que por ejemplo yo estoy ocupando lightwindows y me pide poner dentro del link ….
    params=”lightwindow_width=800,lightwindow_height=345″ cosa que me causa problemas al validar…se entiende?

  102. Jorge Epuñan

    Yo utilizo Prettyphoto René, te lo recomiendo (bajo jQuery).

    Salu2.

  103. Arnold62

    Every flash designer worth his salt knows that SWFObject is the only true way to embed flash into a webpage. ,

  104. rené

    muchas gracias jorge por el dato me sirvio bastante..saludos

  105. Jorge Epuñan

    Hey Arnold62, I totally agree with you that SWFObject is the new way to embed Flash, but look at the date of this post… september 2006… so it’s very old and in that time Lightbox was the king of modal windows. Anyway, tnx for your words.

  106. Ocho

    El que me sepa responder a esto le doy el premio nobel a la maquetación web, porque creo que he topado con un límite irrebasable. Vamos por partes:
    Creas un swf en flash y lo introduces en un “div absoluto” que flote sobre un “div relativo” y le das la opción de wmode=transparent.

    Luego, en el “div relativo” de abajo escribes un simple link a cualquier página que se vea entre las transparencias del swf.

    Pues bien, ese link funciona unicamente bajo IE. En firefox y chrome no reconoce si quiera que haya un link.

    Yo ya me estoy hartando con eso de que IE es una mierda, puede que se salte todas las reglas pero te permite hacer mil cosas más de manera más simple y te resta tiempo de comerte el tarro y te deja ser más creativo.

  107. Gabriel

    Excelente, me funcionó muy bien, muchas gracias por el aporte. Saludos

  108. Joel

    En el archivo lightbox.js en la linea numero 810 esta lo que debemos modificar, aparte de colocar en nuestro swf dentro de un DIV y el wmode=opaque.

    Las lineas del codigo en cuestion es;

    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”;
    }

    }

    observen que he colocado “visible” en dos de las lineas, por defecto este parametro viene “Hidden” por lo que se oculta al momento de hacer click, solo con cambiar el “Hidden” por “Visible” y listo.

  1. [...] Durante un proyecto en específico se deció utilizar Jquery como framework para todo lo que fuera Javascript. Reticente (ya ...
    CSSLab » Validando el CSS de Thickbox
    (11 de Julio del 2007)
  2. [...] Lightbox + swf (CSS Lab, nos da la corrección a una serie de problemas que pueden surgir cuando aplicas ...
    Lightbox con flash « ddsign
    (01 de Septiembre del 2008)
  3. [...] Read more from the original source: LightBox encima de Flash [...]
    LightBox encima de Flash
    (25 de Abril del 2009)

Deja tu comentario

Artículos Relacionados
  • Sin articulos

Sociabiliza

Agrega este artículo a tus sitios sociales favoritos

¿Aún no encuentras?