How to launch jQuery Fancybox on page load?

Question

I would like to launch a Fancybox (e.g. Fancybox's version of a modal or light box) on page load. I could bind it to a hidden anchor tag and fire the click event of that anchor tag via JavaScript, but I would rather just launch the Fancybox directly and avoid the extra anchor tag.

Answer 1

maybe you can use jqmodal,it's lightweight and easy to use. you can show the modal box by calling

$('.box').jqmShow()

Answer 2

Fancybox currently does not directly support a way to automatically launch. The work around I was able to get working is creating a hidden anchor tag and triggering it's onclick event. Make sure your call to trigger the onclick event is included after the jquery and fancybox js files are included. The code I used is as follows:

This sample script is embedded directly in the html, but it could also be included in a js file.

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

Answer 3

Or use this in the JS file after your fancybox is set up:

$('#link_id').trigger('click');

I believe Fancybox 1.2.1 will use default options otherwise from my testing when I needed to do this.

Answer 4

I actually managed to trigger a fancyBox link only from an external JS file using the "live" event:

First, add the live click event on your future dynamic anchor:

$('a.pub').live('click', function() {
  $(this).fancybox(... fancybox parameters ...);
})

Then, append the anchor to the body:

$('body').append('<a class="iframe pub" href="your-url.html"></a>');

Then trigger the fancyBox by "clicking" the anchor:

$('a.pub').click();

The fancyBox link is now "almost" ready. Why "almost" ? Because it looks like you need to add some delay before trigger the second click, otherwise the script is not ready.

It's a quick and dirty delay using some animation on our anchor but it works well:

$('a.pub').slideDown('fast', function() {
  $('a.pub').click();
});

Here you go, your fancyBox should appears onload!

HTH

Answer 5

@capsule .. I can't get this to work .. can we talk over msn / yahoo / aim chat ? or maybe you can share your full js file ...

what i did is the following:

placed this js call in my header and it didn't work, then moved it to my special page .. note that i'm using wordpress along a fancybox plugin which works well ...

autotriggerclick.js">

the autotriggerclick.js file looks like this:

$('a.iframe').live('click', function() {
$(this).fancybox(... fancybox parameters ...);
})
$('body').append('<a class="fancybox iframe" href="http://www.google.com"&gt;&lt;/a&gt;');
$('a.iframe').click();
$('a.iframe').slideDown('fast', function() {
$('a.iframe').click();
});

Answer 6

I've been trying to get ALL of these solutions to work for two weeks now. My site is set up with thumbnail galleries that open with fancybox just fine, but I want the first image in the series to load in fancybox on page load. and yes I'm a beginner in html,css,javascript,etc.

I can't get the following code to work:

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

I think my problem is that I don't understand how I should set up my anchor tag to be "clicked". How do i set it up to launch the first photo in the series on page load?

my thumbnails/images are included in the html this way:

<a href="_images/1.jpg" rel="firstset" class="fancybox"><img src="_images/1_thmb.jpg" width="160" height="116" /></a>

If anyone could help with some additional code you'd save me a lot of trouble. Thank you!!

Answer 7

Maybe this will help... this was used in the full size jQuery calendar click event (http://arshaw.com/fullcalendar/)... but it can be used more generally to deal with fancybox being launched by jQuery.

  eventClick: function(calEvent, jsEvent, view) {
      jQuery("body").after('<a id="link_'+calEvent.url+'" style="display: hidden;" href="http://thisweekinblackness.com/wp-content/uploads/2009/01/steve-urkel.jpg"&gt;Steve&lt;/a&gt;');
      jQuery('#link_'+calEvent.url).fancybox(); 
      jQuery('#link_'+calEvent.url).click();
      jQuery('#link_'+calEvent.url).remove();
    return false;
  }

Answer 8

I got this to work by calling this function in document ready:

$(document).ready(function () {
        $.fancybox({
            'width': '40%',
            'height': '40%',
            'autoScale': true,
            'transitionIn': 'fade',
            'transitionOut': 'fade',
            'type': 'iframe',
            'href': 'http://www.example.com'
        });
});

Answer 9

For my case, the following can work successfully. When the page is loaded, the lightbox is pop-up immediately.

JQuery: 1.4.2

Fancybox: 1.3.1

<body onload="$('#aLink').trigger('click');">
<a id="aLink" href="http://www.google.com" >Link</a></body>

---

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

        $("#aLink").fancybox({
            'width'             : '75%',
            'height'            : '75%',
            'autoScale'         : false,
            'transitionIn'      : 'none',
            'transitionOut'     : 'none',
            'type'              : 'iframe'
        });
    });
</script>

Answer 10

Worked wonderfully! Am using it on a site to pop up a box to confirm votes for a big photo competition! :D