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

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

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

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

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

  5. Jorge Epuñan [#]

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

    Salu2.

  6. Arnold62 [#]

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

  7. rené [#]

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

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

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

  10. Gabriel [#]

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

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

  12. johnny alejandro [#]

    buenas lo que pasa es que tengo problema con el plugin de joomla rokbox, quiero que el swf aparezca debajo de el rokbox como debo de hacer no me deja ya he intentado con el z-index y la verdad no he podido quien me puede ayudar?

  13. estefi [#]

    hola, muy buen dato, tengo un problema, yo estoy trabajando con shadowbox en vez de lightbox, y me desaparece por completo el swf al iniciar el shadowbox, se que en lightbox hay un script que oculta los flash y hay que pasarlo a visible, pero en este caso no encontre algo similar, alguien sabe la solucion para esto en el shadowbox?…mil gracias!

  14. Jorge Epuñan [#]

    estefi: colocarle wmode=opaque a los SWF q sobresalen debiera funcionar en todas las ventanas modales, ya q funcionan de manera similar. He usado muy poco shadowbox como para darte una solucion final.

    Suerte.

  15. Benito [#]

    Hola, en mi web tengo una galeria de fotos, y me gustaria hacer el efecto lightbox a la fotos, la verdad no se como empezar estado mirando por internet pero no he visto nada como realizar los primeros paso, necesito un tutorial o alguien que me ayude, gracias de antemano.
    saludos

  16. kike [#]

    hola que tal me gustaria que me ayudaras con un problema con el lightbox y flash bueno el problema esq al momento de abrir una foto con el lightbox no me aparecen los botones de next o prev sabes a q se deba eso bueno espero que me puedas ayudar ok bye…..

  17. oscar [#]

    Sincesarmente un aplauso por este aporte. Lo que nesecitaba para mi proyecto. Exitos

  18. Diana [#]

    Si me funciona muy bien! en firefox y safari pero en el Explorer7y8 no jala mi flash….

  19. Claudia [#]

    Aleluya!!!! muchas gracias por su gran aporte… me han salvado la vida…

  20. Ramiro [#]

    Hola, priemro agradezco toda la información expuesta en el sitio, me gustria hacer una pregunta. Estoy construyendome un sitio en flash, consegui llamar desde flash una página de wordpress donde tengo una galeria de fotos. El tema es que las fotos cuando las amplio aparecen dentro de la ventana del thickbox. Es posible hacer que aparezcan como una nueva thickbox o lightbox sobreponiendose a todo el contenido?
    Gracias, Ramiro.

  21. Jorge Epuñan [#]

    Ramiro: no. Para eso puedes utilizar otra ventana modal q lo permita, ni Thickbox ni Lightbox. Trata con jQuery UI

  22. williams [#]

    Muchas gracias me sirvio bastante

  23. Carlos Guardia [#]

    No me funciona ni en Safari ni Opera :(
    alguien sabe la solución real para este problema?

  24. enrik [#]

    Buenas, primero comentar que esta función va correctamente utilizando el lightbox++.js que bajé de http://blog.codefidelity.com/?p=18
    Por otra parte con ie9 ha dejado de funcionar correctamente, alguien sabe que se ha modificado del lightbox.js oficial para aplicarlo al lightbox++.js de codefidelity?

    Gracias!

  25. Gerardo [#]

    Muy Bueno!!!! una consulta a los expertos, sirve para cargar videos(swf), mov, etc??

    saludos!!

  26. Surfing Lessons Gold Coast [#]

    Whoa! that post was quite helpful thanks.

  27. Mario Miao [#]

    It is really a nice and helpful piece of information. I am satisfied that you just shared this useful tidbit with us. Please stay us up to date like this. Thank you for sharing.

  28. Aldo Saavedra [#]

    Estoy trabajando con ASP.NET y Chart FX, donde tengo problemas para poner el “Dialog ui” de Jquery sobre el gráfico que crea Chart FX y lo solucione de la siguiente forma:

    function _hideObject(){
    $(‘object’).each(function(){
    $(this).css(‘display’,’none’);
    });
    }

    function _showObject(){
    $(‘object’).each(function(){
    $(this).css(‘display’,’block’);
    });
    }

    No use visibility por que no me sirvió.
    Lo anterior lo tomé de la idea de un comentario de mas arriba.

    Saludos !

  29. Jardin para Fiestas [#]

    Muy buen tip, agrego que no sucede en todos los browsers, algunas actualizaciones corrigen el error.

Responder a Jardin para Fiestas ×

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

CSSLab