disable facebox links until page loads

Question

I would like to disable my facebox links until the page has completely loaded reason being, when I click on a facebox link before the page loads completely, the page loads a different page instead of the modal! What is the best way to fix this problem?

This is facebox script

<link href="facebox.css" media="screen" rel="stylesheet" type="text/css"/>
<script src="facebox.js" type="text/javascript"></script>
<script type="text/javascript">
    jQuery(document).ready(function($) {
      $('a[rel*=facebox]').facebox({
        loading_image : 'images/ajax-loading.gif',
        close_image   : 'images/fb_closelabel.png'
      }) 
    })
</script>

this is html

<a href="linktosomewhere.php" rel="facebox">Click to goto somewhere</a>

Answer 1

Just figured out a decent workaround. Depending on the content you're dealing with, a simple solution is to set display:none to the tag in question, then simply add the following code to your js.

jQuery(document).ready(function($) {
  $('a[rel*=facebox]').facebox({
    loading_image : 'images/ajax-loading.gif',
    close_image   : 'images/fb_closelabel.png'
  });
  $('a[rel*=facebox]').show();  

})

and in your html:

 <a href="linktosomewhere.php" rel="facebox" style="display:none;">Click to goto somewhere</a>

A few months late, but hope this helps someone!

Answer 2

var blocking = false;

$(window).load(function(){blocking=true;});

$('a').click(function(){return blocking});

So... the links wont be clickable till all the images have loaded which is fired on window.load(...)

modify $('a') to your facebox links

Answer 3

.hover1{font-size:10pt};

$(function(e){
  $(".hover1").attr('href','');
});
// here you can change the path in 'http://www.viomjeet.blogspot.com'


<a href="http://www.google.co.in">click to google</a>

Answer 4

Jay,

In response to your question, here's how I manage to have the link display, but not function until all the content is loaded:

JS:

$("a.add-facebox").click(function(){
        $.facebox({ ajax: $(this).attr('fb-href') });
        return false
});

HTML:

 <a href="#" class="add-facebox" fb-href="linktosomewhere.php">Click to go somewhere</a>

Hope this helps!