CODEWITHSUNDEEP
jquerycssflashlightboxcolorbox
phil crowe
phil crowe

Reputation: 897

Colorbox shows under flash

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.

Upvotes: 6

Views: 11733

Answers (6)

Centerdevs
Centerdevs

Reputation: 11

If you are using iframe to external site that have flash content, you can use next code.

onClosed:function(){
        $('#iframe').attr('src', 'http://iframeurl.com/');
        $('#iframe').show();
},
onOpen:function(){
        $('#iframe').hide();
        $('#iframe').removeAttr('src');
}

enjoy.

Upvotes: 1

tuomassalo
tuomassalo

Reputation: 9111

An alternate version of Jorge's answer:

onOpen: function(){
  $('embed:visible').css('visibility','hidden').addClass('colorbox-hidden-fix');
},
onClosed: function(){
  $('embed.colorbox-hidden-fix').css('visibility','visible');
}

This deals with embed elements, if you happen to have such on your pages. It also tries not to show elements that were initially hidden. Should also work with other types, just substitute embed with eg. iframe.

Upvotes: 1

SnowFrogger
SnowFrogger

Reputation: 306

If your problem happens to be Youtube Specific, here is the easiest way I found to fix it:

<iframe src="http://www.youtube.com/embed/b-LJ7pYNI0I?
wmode=transparent" width="590" height="332" frameborder="0" ></iframe>

That is to say, append that final get parameter '?wmode=transparent' to the iframe src.

source: http://groups.google.com/group/slimbox-support/msg/39d42c9e0b6a7093

Upvotes: 2

Jack
Jack

Reputation: 9548

http://jacklmoore.com/colorbox/faq/#faq-flash

Upvotes: 5

Jorge Pedret
Jorge Pedret

Reputation: 1037

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.

Upvotes: 7

danp
danp

Reputation: 15261

Make sure your flash is using a window mode that supports z-indexing, such as transparent. This is defined when you start the flash using swfobject, or similar.

Almost certain that this will be the problem, but it could be that you've got the stacking order of the divs a bit confused. Remember that z-indexing isn't a global hierarchy, it takes the index from the parent element.

Upvotes: 1

Related Questions