How do I get Colorbox to display 5 seconds after the page loads?

Question

Here is what I have so far, but it is loading right away:

<script type="text/javascript">
var pid = <?php echo $_GET['id']; ?>;
var rlink = "<?php echo $domain; ?>share.php?pid=" + pid;
$(document).ready(function(){
    setTimeout($(".url_tag_small").colorbox({ href: rlink, width: "620px", height: "354px", opacity: 0.0, transition: "none", initialWidth: "620px", initialHeight: "354px", iframe: true, title: true, open: true}), 5000);
});
</script>

What am I doing wrong?

Answer 1

You're calling the function in the call to setTimeout instead of passing it a reference to a function that will open the colorbox.

$(document).ready(function(){
    setTimeout(function() {
      $(".url_tag_small").colorbox({ href: rlink, width: "620px", height: "354px", opacity: 0.0, transition: "none", initialWidth: "620px", initialHeight: "354px", iframe: true, title: true, open: true})
    }, 5000);

});

Basically, your version, instead of passing in a function to say, "this is what I want you to do after 5000 milliseconds", was coded to call the .colorbox thing before calling setTimeout.

Answer 2

It is executing your callback at the time the setTimeout call is initialized, not when the timer goes off. Change it to this:

var pid   = <?php echo $_GET['id']; ?>,
    rlink = "<?php echo $domain; ?>share.php?pid=" + pid;

$(document).ready(function(){
    setTimeout(function(){
      $(".url_tag_small").colorbox({ 
        href: rlink, 
        width: "620px", 
        height: "354px", 
        opacity: 0.0, 
        transition: "none", 
        initialWidth: "620px", 
        initialHeight: "354px", 
        iframe: true, 
        title: true, 
        open: true
      })
    }, 5000);
});