Open fancyBox automatically?

Question

I'm currently working on trying to get the fancyBox jQuery plugin to open up automatically as soon as the front page of my site loads. I'm very new to Javascript and jQuery and need some pointers.

I have the below code in between my HEAD tags. Just wondering if there's something else I can insert in here to I can get fancyBox to open up when the page loads.

<script type="text/javascript">
        $(document).ready(function() {
            $(".fancybox").fancybox();
        });
</script>

I found the following API method in the fancyBox documentation and wasn't sure if this is what I'm looking for or not. I couldn't seem to get it to work.

$.fancybox.open( [group], [options] )

Any ideas?

Answer 1

Set it up like this...

<a id="my-custom-trigger" class="gallery" href="http://moviebuzzers.com/wp-content/uploads/2012/08/paranorman-still.jpg">  
    <img src="http://moviebuzzers.com/wp-content/uploads/2012/08/paranorman-still.jpg" height="100"/>
</a>​

Anchor with ID 'my-custom-trigger' is the trigger -> if you click it, fancybox pops out. So you need to 'click' it after page load automaticaly...

// Use document ready event, or window load,
// whichever one suits you the best...
$(window).load(function(){
    // Simulate click on trigger element
    $('#my-custom-trigger').trigger('click');
});

Now, you are done!

Answer 2

if you are using fancybox 2 then you have two options, one is triggering another element as you see in accepted answer and other is manually trigger as seen at

http://jsfiddle.net/STgGM/

As noted at http://fancyapps.com/fancybox/#examples (Launch fancyBox on page load section) Just change onload to whatever you wish

simple usage ;

        $.fancybox.open(['#container_div1','#container_div1']);

Additionally you can try this ;

    <script  type="text/javascript">
        $(document).ready(function () {
            $.fancybox({
                'href': '#my_div'
            });
        });
    </script>

Answer 3

Tested with version 2.1.5

$(window).load(function(){
    $.fancybox.open('image.jpg');
});

Answer 4

$(document).ready(function() {
    $('#popup_box').fancybox().trigger('click'); 
});

source

Answer 5

$.fancybox(
{
'title':'Title',
'overlayColor': '#000',
'href' :'index.html',
'overlayOpacity': 0.7                
}
);  

Answer 6

$(window).load(function(){
    // Simulate click on trigger element
    fancy =  $(".fancybox").fancybox();
    $.fancybox.open( fancy )
});