How to launch Fancybox Popup on page load?

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

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>