Question

我正在努力尝试让fancyBox jQuery插件在我的网站首页加载后自动打开。我是Javascript和jQuery的新手，需要一些指导。

我的HEAD代码之间有以下代码。只是想知道是否还有其他东西我可以在这里插入，我可以在页面加载时打开fancyBox。

<script type="text/javascript">
        $(document).ready(function() {
            $(".fancybox").fancybox();
        });
</script>

我在fancyBox文档中找到了以下API方法，并且不确定这是否是我正在寻找的内容。我似乎无法让它发挥作用。

$.fancybox.open( [group], [options] )

有什么想法吗？

Answer 1

像这样设置......

<a id="my-custom-trigger" class="gallery" href="http://moviebuzzers.com/wp-content/uploads/2012/08/paranorman-still.jpg">  
    <img src="http://moviebuzzers.com/wp-content/uploads/2012/08/paranorman-still.jpg" height="100"/>
</a>

ID为'my-custom-trigger'的锚点是触发器 - ＆gt;如果你点击它，fancybox会弹出。因此，您需要在页面加载后自动“点击”...

// Use document ready event, or window load,
// whichever one suits you the best...
$(window).load(function(){
    // Simulate click on trigger element
    $('#my-custom-trigger').trigger('click');
});

现在，你已经完成了！

Answer 2

如果您使用的是fancybox 2，那么您有两个选项，一个是triggering another element，如您在接受的答案中所见，另一个是manually trigger，如

所示

http://jsfiddle.net/STgGM/

正如http://fancyapps.com/fancybox/#examples所述（在页面加载部分启动fancyBox）只需将onload更改为您想要的任何内容

简单用法;

        $.fancybox.open(['#container_div1','#container_div1']);

另外你可以试试这个;

    <script  type="text/javascript">
        $(document).ready(function () {
            $.fancybox({
                'href': '#my_div'
            });
        });
    </script>

Answer 3

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

source

Answer 4

使用2.1.5版进行测试

$(window).load(function(){
    $.fancybox.open('image.jpg');
});

Answer 5

$.fancybox(
{
'title':'Title',
'overlayColor': '#000',
'href' :'index.html',
'overlayOpacity': 0.7                
}
);

Answer 6

$(window).load(function(){
    // Simulate click on trigger element
    fancy =  $(".fancybox").fancybox();
    $.fancybox.open( fancy )
});

自动打开fancyBox？

6 个答案: