Dec 13, 2008 - AJAX, PHP, Wordpress    24 Comments

Flash swf and Lightbox overlapping problem solution

Recently I was working in an American project where my client wanted to convert this static site to dynamic. Everything was fine except the gallery. The existing gallery was done using Lightbox effect and there was a flash audio file. The audio file was avoiding the Lightbox effect and coming overlapping any effect. And this is where the problem started.

OK. See below for an idea how it looked:

Not funny or interesting. Ugly, Huh? So, my client requested to fix it.

But what is the reason for this problem? Hm? Actually this was happening because Flash file is always above any other elements in your page. It comes at the topmost priority position in your page and that is why it can ignore the Lightbox effect. Our job is to make sure taht the Flash swf file stands behind the door when a Lighbox effect is in action. Clear?

In few blogs, I found possible solutions and they did not work. One possible solution that I thought would work was using z-index property in CSS. One coder advised to keep the embedding code in a lower z-index (such as 0) and keeping the container gallery in higher z-index (such as 1). Although he said, it worked for her, but did not work for me. But you can give a try if you want. May be this trick can work for you depending you code.

So, how did you fix it so that it looks like as follows?

So, what is the trick?  If you make sure that you added the following lines bold red in your HTML code, the problem is solved.

That is all and…

Thank you for reading.

24 Comments

  • Thankx dude, you really help me.

  • Man!!!, you save my day, thx a million. 🙂

  • thanks man 🙂

  • Thanks man, that helped me out a lot!!!

  • Thanks dear, your information really great and help me , but i have facing overlaping problem in firefox and chrome. In IE it;s work find but not in firefox and chrome

  • sorry ya, it’s not help’s me, give me some other solution man, actually i’m using facebox(this is also one type of lightbox). this one i took from Dynamic drive website man, In this it is not working properly ya, plz give me ya other solution man.

    byeeeeee
    Srisailam

  • Thanks man! You are great!
    Your help was great!
    I’ m very huppy now!!! 🙂

  • Thanks a lot! This really helped me!

  • thank you!!!

  • thanks..it really works!!!! tnx a lot 🙂

  • Hi! at had the same problem, you’ve only changed it at 2 places, this did’nt worked for me, I changed it at 3 places: so this is the code:

    AC_FL_RunContent( ‘codebase’,’http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0′,’width’,’1013′, ‘height’,’177′,’src’,’flash/flash_header’,’quality’,’high’,’pluginspage’, ‘http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash’,’movie’,’flash
    /flash_header’,

    ‘wmode’,’opaque’ );

    //end AC code

    Good luck!

  • Thanks. you have saved my time. It works fine for me.

  • Thanks Dude ! It working fine Gr8 Research !

  • Its working.. thank you very much..!!

  • Thanks a bunch, that was a really short and efficient fix. Saved me a couple of hours of searching!

  • thnx alot!
    Big HELP…

  • Thank you very much . It helped me!

  • Thanks for all!!! It works great!!!

  • Thanks for your support. i am searching for this from last few days. It helps me a lot. Nice work

    God Bless You.

  • Thankss, you are a machinee!!!!!

  • Help ,My code is this and this with the same problem you had. Help me solve this major problem.
    Luciano, Brazil

  • Thanks a lot!!!

  • thx, no words to say. it’s helped me more.

  • bossssss … thanks a lot for saving my time…

Got anything to say? Go ahead and leave a comment!