Lightbox + SWF

1/Sep/2006 517

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

    modafinil reviews modafinil online

  2. Joshuawag [#]

    generic viagra us pharmacy viagra is too expensive cialis cost drugs going generic in 2017 walmart 4 prescription list 2018 how to boost libido quickly

  3. prednisolon [#]

    prednisone online prednisolone sodium phosphate

  4. off white [#]

    I precisely desired to say thanks once more. I’m not certain the things I would’ve handled without the type of pointers provided by you directly on that problem. It seemed to be a distressing matter in my view, however , seeing this specialized avenue you handled it took me to jump for gladness. I’m just thankful for your help and as well , hope that you comprehend what a great job you were putting in training many others through your web page. I am sure you haven’t met any of us.

  5. a bathing ape [#]

    I am commenting to make you know of the incredible encounter my cousin’s princess went through using your web page. She learned numerous issues, most notably how it is like to possess a marvelous giving mindset to get many others effortlessly comprehend chosen extremely tough things. You actually did more than our own desires. Thank you for giving these warm and friendly, healthy, informative as well as cool tips about your topic to Janet.

  6. retro jordans [#]

    I want to get across my affection for your kind-heartedness for women who absolutely need assistance with the area. Your very own dedication to getting the solution all-around became exceedingly helpful and have all the time helped guys much like me to arrive at their goals. The warm and helpful hints and tips indicates a great deal a person like me and extremely more to my peers. Thanks a ton; from all of us.

  7. nike lebron 16 [#]

    Thanks for your own efforts on this website. Kate really likes setting aside time for research and it’s really easy to understand why. We hear all regarding the lively form you render informative strategies via your blog and as well as attract response from visitors on that area so my simple princess is certainly understanding a great deal. Take pleasure in the remaining portion of the new year. You are always conducting a very good job.

  8. golden goose [#]

    Needed to write you one little observation so as to give thanks as before for these pleasing concepts you have shown above. This is quite pretty generous of people like you to give openly what exactly a lot of folks could possibly have offered for sale as an electronic book to earn some cash on their own, particularly considering the fact that you might have done it if you ever considered necessary. The basics additionally worked to become good way to understand that other individuals have similar passion similar to my very own to figure out significantly more with regard to this problem. I’m sure there are thousands of more pleasurable opportunities in the future for those who start reading your blog.

  9. golden goose [#]

    I enjoy you because of all of the effort on this site. My aunt take interest in doing research and it’s really easy to understand why. Most people learn all relating to the dynamic method you create good thoughts on your web blog and therefore foster contribution from people on that topic plus our princess has always been starting to learn a great deal. Take pleasure in the rest of the new year. You’re conducting a fantastic job.

  10. kyrie 4 [#]

    I want to express my love for your kindness for women who absolutely need assistance with that niche. Your real dedication to passing the solution all over had been unbelievably advantageous and have constantly empowered regular people just like me to get to their goals. Your amazing insightful recommendations can mean a great deal a person like me and somewhat more to my mates. Warm regards; from each one of us.

  11. yeezy boost 700 [#]

    I actually wanted to post a small note in order to thank you for some of the unique secrets you are writing at this website. My prolonged internet search has finally been paid with awesome know-how to share with my friends and family. I would point out that we visitors are extremely blessed to dwell in a superb website with so many marvellous people with good ideas. I feel quite happy to have seen the web page and look forward to so many more awesome times reading here. Thanks a lot once more for a lot of things.

  12. kyrie 6 [#]

    I wanted to construct a quick message in order to say thanks to you for all the superb secrets you are writing on this site. My time consuming internet lookup has finally been rewarded with reliable details to talk about with my good friends. I would repeat that most of us visitors actually are very lucky to exist in a useful place with so many wonderful people with good points. I feel somewhat blessed to have come across your entire web page and look forward to tons of more exciting times reading here. Thank you once again for everything.

  13. accutane for acne [#]

    accutane ipledge accutane medication

  14. bactrim ds 800 160 [#]

    bactrim sulfamethoxazole side effects

  15. modafinilhalflife [#]

    https://modafinilpleasure.com/ modafinil dosage

  16. GaloInvake [#]

    zithromax 250 mg cost

CSSLab