How to launch jQuery Fancybox on page load?

JqueryJquery PluginsFancybox

Jquery Problem Overview

I would like to launch a Fancybox (e.g. http://fancy.klade.lv/">Fancybox's</a> 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.

Jquery Solutions

Solution 1 - Jquery

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>

Solution 2 - Jquery

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'
		});
});

Solution 3 - Jquery

Its simple:

Make your element hidden first like this:

<div id="hidden" style="display:none;">
    Hi this is hidden
</div>

Then call your javascript:

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

Check out the image below:

enter image description here

Another example:

<div id="example2" style="display:none;">
        <img src="http://theinstitute.ieee.org/img/07tiProductsandServicesiStockphoto-1311258460873.jpg" />
    </div>

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

enter image description here

Solution 4 - Jquery

Window.load (as opposed to document.ready()) appears to the be the trick used in the JSFiddler onload demos of Fancybox 2.0:

$(window).load(function()
{
	$.fancybox("test");
});

Bare in mind you may be using document.ready() elsewhere, and IE9 gets upset with the load order of the two. This leaves you with two options: change everything to window.load or use a setTimer().

Solution 5 - Jquery

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.

Solution 6 - Jquery

why isn't this one of the answers yet?:

$("#manual2").click(function() {
    $.fancybox([
        'http://farm5.static.flickr.com/4044/4286199901_33844563eb.jpg',
        'http://farm3.static.flickr.com/2687/4220681515_cc4f42d6b9.jpg',
        {
            'href'  : 'http://farm5.static.flickr.com/4005/4213562882_851e92f326.jpg',
            'title' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit'
        }
    ], {
        'padding'           : 0,
        'transitionIn'      : 'none',
        'transitionOut'     : 'none',
        'type'              : 'image',
        'changeFade'        : 0
    });
});

now just trigger your link!!

got this from the Fancybox homepage

Solution 7 - Jquery

The best way I've found is:

<script type="text/javascript">
    $(document).ready(function() {
        $.fancybox(
             $("#WRAPPER_FOR_hidden_div_with_content_to_show").html(), //fancybox works perfect with hidden divs
             {
                  //fancybox options
             }
        );
    });
</script>

Solution 8 - Jquery

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>

Solution 9 - Jquery

Alex's answer is great. but It is importanting to note that that calls the default fancybox style. If you have your own custom rules, you should just call .trigger click on that specific anchor

$(document).ready(function() {
$("#hidden_link").fancybox({ 
	'padding':			0,
	'cyclic':		true,
	'width': 		625,
	'height': 		350,
	'padding':      0, 
	'margin':      0, 
	'speedIn': 		300,
	'speedOut': 	300,
	'transitionIn': 'elastic',
	'transitionOut': 'elastic',
	'easingIn': 	'swing',
	'easingOut': 	'swing',
	'titleShow' : false
}); 
    $("#hidden_link").trigger('click');
});

Solution 10 - Jquery

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

Solution 11 - Jquery

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">Steve</a>');
	  jQuery('#link_'+calEvent.url).fancybox(); 
	  jQuery('#link_'+calEvent.url).click();
	  jQuery('#link_'+calEvent.url).remove();
    return false;
  }

Solution 12 - Jquery

You can also use the native JavaScript function setTimeout() to delay the display of the box after the DOM is ready.

<a id="reference-first" href="#reference-first-message">Test the Popup</a>

<div style="display: none;">
    <div id="reference-first-message" style="width:400px;height:100px;overflow:auto;">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis mi eu elit tempor facilisis id et neque. Nulla sit amet sem sapien. Vestibulum imperdiet porta ante ac ornare. Nulla et lorem eu nibh adipiscing ultricies nec at lacus. Cras laoreet ultricies sem, at blandit mi eleifend aliquam. Nunc enim ipsum, vehicula non pretium varius, cursus ac tortor. Vivamus fringilla congue laoreet. Quisque ultrices sodales orci, quis rhoncus justo auctor in. Phasellus dui eros, bibendum eu feugiat ornare, faucibus eu mi. Nunc aliquet tempus sem, id aliquam diam varius ac. Maecenas nisl nunc, molestie vitae eleifend vel, iaculis sed magna. Aenean tempus lacus vitae orci posuere porttitor eget non felis. Donec lectus elit, aliquam nec eleifend sit amet, vestibulum sed nunc.
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function() {
        $("#reference-first").fancybox({
            'titlePosition'         : 'inside',
            'transitionIn'          : 'fade',
            'transitionOut'         : 'fade',
            'overlayColor'          : '#333',
            'overlayOpacity'        : 0.9
        }).trigger("click");

        //launch on load after 5 second delay
        window.setTimeout('$("#reference-first")', 5000);
    });
</script>

Solution 13 - Jquery

In case if you don't have button to click. I mean if you want to open it on ajax response then it would be like this :

$.fancybox({
      href: '#ID',
      padding	: 23,
      maxWidth	: 690,
      maxHeight	: 345
});

Solution 14 - Jquery

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

This will help..

Solution 15 - Jquery

You can put link like this (it will be hidden. May be before </body>)

<a id="clickbanner" href="image.jpg" rel="gallery"></a>

And working rel attribute or class like this

$(document).ready(function() {
	$("a[rel=gallery]").fancybox({
		openEffect	: 'elastic',
		closeEffect	: 'elastic',
		maxWidth	: 800,
		maxHeight	: 600
	});
});

Just do it with jquery trigger function

$( window ).load(function() {
  $("#clickbanner").trigger('click');
});

Solution 16 - Jquery

HTML:

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

JS:

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

Solution 17 - Jquery

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!

Solution 18 - Jquery

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

$('.box').jqmShow()
Categories
Recommended Jquery Solutions
Recommended Jquery Plugins Solutions
Recommended Fancybox Solutions

Previous Solution:

Where are an UIWebView's cookies stored?

IphoneCookies

Next Solution:

Should methods that throw RuntimeException indicate it in method signature?

JavaExceptionOopException Handling

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionBleggerView Question on Stackoverflow
Solution 1 - JqueryBleggerView Answer on Stackoverflow
Solution 2 - JqueryJordanCView Answer on Stackoverflow
Solution 3 - JqueryHisham MuneerView Answer on Stackoverflow
Solution 4 - JqueryChris SView Answer on Stackoverflow
Solution 5 - Jquerycynge13View Answer on Stackoverflow
Solution 6 - JqueryThomasView Answer on Stackoverflow
Solution 7 - Jqueryarena-ruView Answer on Stackoverflow
Solution 8 - JqueryCMenView Answer on Stackoverflow
Solution 9 - JqueryAndrew Scott KimreyView Answer on Stackoverflow
Solution 10 - JqueryCapsuleView Answer on Stackoverflow
Solution 11 - JqueryLeighView Answer on Stackoverflow
Solution 12 - JqueryJohn KaryView Answer on Stackoverflow
Solution 13 - JqueryMaha DevView Answer on Stackoverflow
Solution 14 - JqueryPrabhagaranView Answer on Stackoverflow
Solution 15 - JquerynixisView Answer on Stackoverflow
Solution 16 - JqueryAnasSafiView Answer on Stackoverflow
Solution 17 - JqueryLouis B.View Answer on Stackoverflow
Solution 18 - JquerylimboyView Answer on Stackoverflow