views:

102

answers:

1

Hi, I'm using shadowbox js for showing Flash video in lightbox style popups.

So far it's working but I have this problem:

when the page loads and the user clicks too early on the linked image which should open the shadowbox the swf is loaded directly (and no popup appears). Also, the script seems to stop in this case and never assigns the right clicklistener - so the shadowbox is never shown also on subsequent clicks.

Shadowbox 3.0.1

Anybody has experienced the same issue, any solutions? Thanks.

+2  A: 

You didn't post any info on when is the shadowbox first called.

If my guess is correct, You are running shadowbox in an onload event handler. Try calling it when DOM is ready.

jQuery:

$(document).ready(function(){
//call it here
});

[EDIT] In response to Your comment.

If this doesn't help there is only one solution.

Add this just after the line loading jquery script in head

<script>
$('<div></div>')
    .css({width:'100%',height:'100%',
'position':'fixed','top':'0px',left:'0px',
'z-index':'10000'})
.addClass('cover');
.prependTo('body');
</script>

The above should be one line, but then it's being cut by the stackoverflow's CSS ;)

and then $('.cover').remove(); when You are sure everything is loaded.

I do that when running crazy lots of code on pageload ;)

naugtur
Thanks for you answer. But I did try that approach already: same problem. My site has some external scripts (google analytics and the like) which postponse the full loading of the page. I guess it has something to do with it. But actually I can reproduce the problem also on the shadowbox homepage: http://www.shadowbox-js.com/index.html (try to load the page and click on a box very fast after loading)
hubertg
see the edit. This will help!
naugtur
thanks. despite your exact solution did not work for me (just nothing was added) I used a modified version of it:I just added this div before the shadowbox div:<div class="cover" style="position:absolute;z-index:1000;height:500px;width:800px;background:url(../images/pixel.gif) repeat"></div>the remove method is the same like in your answer. the transparent image solved the problem for me that IE seems to ignore a transparent div and the link was still clickable. thanks!
hubertg
It didn't add, because the body tag didn't exist yet. sorry, my bad ;)If You put my solution inside the body tag it should work.
naugtur