How to launch jQuery Fancybox on page load?

user_71933 0
Viewed 326557

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.

fancybox jquery-plugins jquery
18 Answers

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 click event. Make sure your call to trigger the click 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>
user_719330

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.

Admin1 
$(document).ready(function() {
    $.fancybox(
      '<p>Yes. It works <p>',
       {
        'autoDimensions'    : false,
        'width'             : 400,
        'height'            : 200,
        'transitionIn'      : 'none',
        'transitionOut'     : 'none'
       }
    );
});

This will help..

user_47964780

HTML:

<a id="hidden_link" href="LinkToImage"></a>

JS:

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

Using version 3.5.7 of Fancybox I was able to auto-launch it without any extra Javascript. Just add a reference to your Fancybox "group" as an anchor link in the URL.

For example if this is your markup:

<a href="foo.jpg" data-fancybox="gallery">Click me</a>

Just use the following link:

https://example.org/slideshow.php#gallery-1

This automatically opens the slide show for me on page load!

user_2788400

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

$('.box').jqmShow()
user_949620
Related