CODEWITHSUNDEEP
javascriptjqueryfancyboxfancybox-2
Grigoriy Lev
Grigoriy Lev

Reputation: 1

How to make FancyBox auto start on page load and auto hide after 15 seconds?

I'm using FancyBox 2.1.5. I need a fullscreen ad (html) to be shown on homepage after it loads and closing this ad with 2 options: standard with user' click and auto hiding if no action during 15 seconds.

First task is not a problem with:

$.fancybox.open([
{
    href : 'http://fancyapps.com/fancybox/demo/1_b.jpg',
    title : 'Title'
} 
], {
padding : 0   
});

But how to set a counter and autohide?

I'm thinking of following:

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

$('.fancybox').fancybox({
afterShow: function(){
    setTimeout( function() {$.fancybox.close(); },15000);
},
afterClose: function(){
    clearTimeout( );
},
});

});

Is this correct?

Thanks in advance for your help!

Upvotes: 0

Views: 1642

Answers (2)

JFK
JFK

Reputation: 41143

I think you should rather do

$(document).ready(function () {
    $.fancybox.open([{
        href: 'http://fancyapps.com/fancybox/demo/1_b.jpg',
        title: 'Title'
    }], {
        padding: 0,
        afterShow: function () {
            setTimeout(function () {
                $.fancybox.close();
            }, 15000);
        },
        afterClose: function () {
            clearTimeout();
        }
    });
});

See JSFIDDLE

EDIT :

As properly pointed out by djdavid98, clearing time out on afterClose callback is redundant.

$(document).ready(function () {
    $.fancybox.open([{
        href: 'http://fancyapps.com/fancybox/demo/1_b.jpg',
        title: 'Title'
    }], {
        padding: 0,
        afterShow: function () {
            setTimeout(function () {
                $.fancybox.close();
            }, 15000);
        }
    });
});

See updated JSFIDDLE

Upvotes: 1

designerNProgrammer
designerNProgrammer

Reputation: 2701

You can use the delay and click function together on page load to exe.c and then fadeout after 15 seconds

Upvotes: 0

Related Questions