CODEWITHSUNDEEP
jqueryfancyboxjavascript
donguyzo
donguyzo

Reputation: 79

Start FancyBox on page load without clicking

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).

Upvotes: 1

Views: 51776

Answers (7)

Ambie
Ambie

Reputation: 11

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

Upvotes: 1

MagePal Extensions
MagePal Extensions

Reputation: 17656

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>

Upvotes: 3

Parisa
Parisa

Reputation: 801

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

source

Upvotes: 2

Alin Razvan
Alin Razvan

Reputation: 1523

 <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>

Upvotes: 1

ptim
ptim

Reputation: 15587

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

Upvotes: 4

Reni Raj N R
Reni Raj N R

Reputation: 123

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

Upvotes: 11

king14nyr
king14nyr

Reputation: 715

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?

Upvotes: 1

Related Questions