javascript - 如何让FancyBox在页面加载时自动启动并在15秒后自动隐藏？

Question

我正在使用 FancyBox 2.1.5。 我需要在加载后在主页上显示全屏广告 (html)，并使用 2 个选项关闭此广告:标准用户点击和如果 15 秒内没有任何操作则自动隐藏。

第一个任务不是问题:

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

但是如何设置计数器和自动隐藏呢？

我正在考虑以下内容:

$(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( );
},
});

});

这是正确的吗？

预先感谢您的帮助!

Answer 1

我认为你应该这样做

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

参见JSFIDDLE

编辑:

正如 djdavid98 正确指出的那样，清除 afterClose 回调超时是多余的。

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

查看更新 JSFIDDLE