Start FancyBox on page load without clicking

Question

I want to display a modal window using fancybox at webpage load. This window will display a web page that will allow to choose the desired language. The page displayed in the popup window will be a web page (index_popup.php) located in the same folder as the home page (index.php).

possible duplicate of [How to launch jQuery Fancybox on page load?](http://stackoverflow.com/questions/807271/how-to-launch-jquery-fancybox-on-page-load) — Rory McCrossan, Dec 08 '11 at 16:17

score 11 · Answer 1 · answered Feb 23 '13 at 07:16

11

window.jQuery(document).ready(function() {
    $.fancybox.open('#popup_box');
});

answered Feb 23 '13 at 07:16

Reni Raj N R

123
2
7

1

thanks for your solution it is working when you want to open on load without click – steve Jun 20 '13 at 12:10

score 4 · Answer 2 · answered Dec 11 '13 at 06:44

For fancybox 2: the documentation offers the following example: http://jsfiddle.net/STgGM/, to which I've added a document ready:

jQuery(document).ready(function($) {
    $.fancybox.open([
        {
            href : 'http://fancyapps.com/fancybox/demo/1_b.jpg',
            title : '1st title'
        },
        {
            href : 'http://fancyapps.com/fancybox/demo/2_b.jpg',
            title : '2nd title'
        }    
    ], {
        padding : 0   
    });
});

score 3 · Answer 3 · edited May 23 '17 at 12:09

See Fancybox popup once time for session

<script type="text/javascript" src="/js/jquery/jquery.cookie.js"></script>
<script type="text/javascript">

(function($) {

    function openFancybox() {
        // launches fancybox after half second when called
        setTimeout(function () {
                $.fancybox.open(
                    [
                        {
                            href : 'http://fancyapps.com/fancybox/demo/1_b.jpg',
                        }    
                    ]
                );
        }, 1500);
    };

    var visited = $.cookie('visited'); // create the cookie
    if (visited == 'yes') {
        return false; // second page load, cookie is active so do nothing
    } else {
        openFancybox(); // first page load, launch fancybox
    };
    // assign cookie's value and expiration time
    $.cookie('visited', 'yes', {
        expires: 1 // the number of days the cookie will be effective
    });

})(jQuery);
</script>

How to make this banner clickable? I want to add a link behind then when the user clicks on this banner he should redirect to the link! — Muhammad Shahzad, Mar 18 '16 at 11:29
Take a look at the api http://fancybox.net/api ... you maybe able to use "content" with html code instead of "href" — MagePal Extensions, Mar 18 '16 at 18:06

score 2 · Answer 4 · answered Apr 20 '15 at 15:56

2

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

source

answered Apr 20 '15 at 15:56

parisssss

803
16
36

Thanks pariss.. It works for me inside a function call. – Prabhagaran Oct 07 '16 at 05:36
it works outside of (document).ready. example: function myfunction(){ $('#popup_box').fancybox().trigger('click'); } – Prabhagaran Oct 07 '16 at 05:38

score 1 · Answer 5 · answered Mar 15 '14 at 17:29

 <head>   
<script type="text/javascript">

    function autoClick() { 
    document.getElementById('onload').click();
    } 

    </script>
</head>

<body onLoad="autoClick();">

<a class="fancybox-media" id="onload" href="https://www.youtube.com/watch?v=MWydLB0nFew"></a>

score 1 · Answer 6 · answered Aug 22 '18 at 22:43

1

I tried the first solution:

window.jQuery(document).ready(function() {
    $.fancybox.open('#popup_box');
});

But I wasn't able to get it to load correctly, so I added a variable, then passed that in. It works exactly as I needed it to. Has the slider now, instead of loading each image separately.

This was my change:

window.jQuery(document).ready(function() {
    var box = $('#popup_box');
    $.fancybox.open(box);
});

answered Aug 22 '18 at 22:43

Ambie

11
2

This doen't add any value to the question.If you think previously provided answer has a problem, you are always welcome to comment or flag it. If you think you had to modify a statement of previously given answer then try giving explanation around it why it solved the problem – Amit Phaltankar Aug 22 '18 at 23:17

score 1 · Answer 7 · edited May 23 '17 at 11:46

1

Although FancyBox doesn't support a way to auto launch, there have been a few workarounds that seem pretty successful. One notable method I've used is in the link below to a similar question. This should accomplish the onPageLoad:

How to launch jQuery Fancybox on page load?

edited May 23 '17 at 11:46

Community

1
1

answered Dec 08 '11 at 16:20

king14nyr

715
6
21

Start FancyBox on page load without clicking

7 Answers7