We help IT Professionals succeed at work.

How to get lightbox to show over Flash banner?

colonelblue asked
I have a flash banner that plays when you first get on the initial page. There are navigation buttons over it in html. One of those nav button links opens up a lightbox but it displays behind the flash banner. I'd like for the lightbox to be prominent ( be over the flash ) in display when the lightbox is open , and then goes back to the flash banner  when the lightbox is closed.

Is there a simple solution to this?

Thanks in advance.
Watch Question

Please post the code your using or link but i think it's a z-index problem


Hello and thank you.

This is the colorbox ( lightbox ) code in the <Head> tags:

<style type="text/css">
            body{font:12px/1.2 Verdana, Arial, san-serrif; padding:0 10px;}
            a:link, a:visited{text-decoration:none; color:#416CE5; border-bottom:1px solid #416CE5;}
            h2{font-size:13px; margin:15px 0 0 0;}
        <link type="text/css" media="screen" rel="stylesheet" href="../colorbox/test/colorbox.css" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script src="../colorbox/test/jquery.colorbox.js"></script>
                //Examples of how to assign the ColorBox event to elements
                $("a[rel='example3']").colorbox({transition:"none", width:"75%", height:"75%"});
                $(".example6").colorbox({iframe:true, innerWidth:425, innerHeight:344});
                $(".example7").colorbox({width:"80%", height:"80%", iframe:true});
                $(".example8").colorbox({width:"50%", inline:true, href:"#inline_example1"});
                    onOpen:function(){ alert('onOpen: colorbox is about to open'); },
                    onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
                    onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
                    onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
                    onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
                //Example of preserving a JavaScript event for inline calls.
                    $('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
                    return false;

This is a link in a html table literally on top of the flash banner:

        <td width="152" align="left" valign="bottom"><strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="../colorbox/test/egallery/index.html">Picture

This is the flash code under the link above ( an html table with one row and nav links ).

  <object classid="xxxxxxxx" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="800" height="144">
    <param name="movie" value="../images/RBanner.swf?section=market&amp;picture=/images/storefront.jpg&amp;fx=2&amp;color=white">
    <param name="quality" value="high">
    <embed src="../images/RBanner.swf?section=market&amp;picture=/images/storefront.jpg&amp;fx=2&amp;color=white" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="800" height="144">

Thank you in advance for any help.
Add this parameter to your object.

<param name="wmode" value="transparent">


Hello Onthrax, I did as suggested. I added the parameter to the flash object however I do not see any changes.

Have you checked the zIndex values as well as iangough7 has suggested in the first reply as it's a combination of them both..

Oops...  It should have been split between http:#32988479 and http:#32988810, sorry about that...