How to launch Fancybox Popup on page load?

5.00 Rating, Out of: 5 Votes: 21 Star2 Stars3 Stars4 Stars5 Stars
Loading ... Loading ...

How to Trigger Fancybox function on page load?

Fancybox currently does not directly support a way to automatically launch. So we have to do some javascript codes to make it Trigger on page load. here some a way you can launch popup with fancybox on page load or after some delay as per your requirements.

1# Popup on page Load

 

 $(document).ready(function() {
        $.fancybox({
            'titlePosition'         : 'inside',
            'transitionIn'          : 'fade',
            'transitionOut'         : 'fade',
	 'href': 'http://www.example.com',
	'type'				: 'iframe',
            'overlayOpacity'        : 0.9
        })
    });

 

2# Popup on page Load with trigger

 

 $(document).ready(function() {
        $(".lightboxLog").fancybox({
            'titlePosition'         : 'inside',
            'transitionIn'          : 'fade',
            'transitionOut'         : 'fade',
	 'href': 'http://www.example.com',
	'type'				: 'iframe',
            'overlayOpacity'        : 0.9
     }).trigger("click"); ///// call popup
        });

3# Popup on page Load with delay

    $(document).ready(function() {
        $(".lightboxLog").fancybox({
            'titlePosition'         : 'inside',
            'transitionIn'          : 'fade',
            'transitionOut'         : 'fade',
	 'href': 'http://www.example.com',
	'type'				: 'iframe',
            'overlayOpacity'        : 0.9
        });
 
        //launch on load after 5 second delay
 window.setTimeout('$(".lightboxLog").trigger("click")', 5000);///// call popup with delay 
        });

enjoy