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.

<?php
$client_testimonial = “/testimonials/audio_file.mp3″;
?>
<object type=”application/x-shockwave-flash” width=”200″ height=”15″
data=”/testimonials/xspf_player_slim.swf?song_url=<?php echo $client_testimonial; ?>&song_title=Air-trekkers Testimonial&player_title=Click to hear testimonial!”>
<param name=”wmode” value=”opaque”>
<param name=”movie”
value=”/testimonials/xspf_player_slim.swf?song_url=<?php echo $client_testimonial; ?>&song_title=Air-trekkers Testimonial&player_title=Click to hear testimonial!” />
<embed wmode=”opaque” src=”/testimonials/xspf_player_slim.swf?song_url=<?php echo $client_testimonial; ?>&song_title=Air-trekkers Testimonial&player_title=Click to hear testimonial!” quality=”high” pluginspage=”http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash” type=”application/x-shockwave-flash” width=”200″ height=”15″></embed>
</object>

That is all and…

Thank you for reading.