自动打开fancyBox？

Question

我目前正在尝试让 fancyBox jQuery 插件在我的网站主页加载时自动打开。我对Javascript和jQuery非常陌生，需要一些指点。

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

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

我在fancyBox文档中找到了以下API方法，但不确定这是否是我要找的。我似乎无法使其正常工作。

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

任何想法？

- Jared Schwager

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”的锚点是触发器 -> 如果您单击它，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');
});

现在，你已经完成了！

- Andreyco

---

太棒了！这是我想到的另一种选择，但我不确定如何实现。我明天会试一试。谢谢！ - Jared Schwager

Answer 2

如果您正在使用Fancybox 2，则有两个选项，一个是像接受的答案中所示的触发另一个元素，另一个是像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>

- Erdinç Çorbacı

Answer 3

已测试通过，版本为2.1.5

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

- user4120314

Answer 4

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

来源

- parisssss

Answer 5

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

- Avinash Saini

---

这个答案没有解决如何在页面加载时启动fancyBox的问题。 - Chaya Cooper

Answer 6

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

- Luis Leitão

---

嗨！尽管这个答案会打开fancybox，但它不是一个完整的解决方案来回答原始问题。原帖子特别问如何在页面加载时执行此操作，可惜你的答案没有包含任何有关此信息的内容。 - Richard Rout