Colorbox shows under flash

jquery css flash lightbox colorbox
phil crowe picture phil crowe · Aug 2, 2010 · Viewed 11.7k times · Source

I am using jQuery's colorbox to open up an iframe on a page. On the page there are two flash SWFs. When I click the button that opens the colorbox, those flash SWFs appear over the top of my colorbox div. I've checked the CSS properties of the colorbox, and the overlay has position:absolute and z-index:999. I have given the SWFs a z-index:0 property, but they still show over the top of the colorbox. This happens in Firefox, IE, and Chrome.

Answer

Jorge Pedret picture Jorge Pedret · May 17, 2011

For those using the iframe embed code from Youtube or Vimeo, you have to approach it differently. I used the events onOpen and onClosed to hide and show back the iframe. Here's an example:

$('.selector').colorbox({
    inline: true,
    href: '.step.'+target,
    rel: 'steps',
    onOpen: function(){
        $('iframe').css('visibility','hidden');
    },
    onClosed: function(){
    $('iframe').css('visibility','visible');
    },
    loop: false,
    opacity: 0.5
});

I guess it also works if you want to apply it to your embed or object tag as a quick solution.

Related questions

How do I add a class to a given element?

I have an element that already has a class: <div class="someclass"> <img ... id="image1" name="image1" /> </div> Now I want to create a JavaScript function that will add a class to the div (…

Read More
How can I remove a style added with .css() function?

I'm changing CSS with jQuery and I wish to remove the styling I'm adding based on the input value: if(color != '000000') $("body").css("background-color", color); else // remove style ? How can I do this? Note that the line above …

Read More
Slide right to left?

How can I have a div go from collapsed to expanded (and vice versa), but do so from right to left? Most everything I see out there is always left to right.

Read More