如何在页面加载时启动jQuery Fancybox？

Question

我想在页面加载时启动Fancybox(例如Fancybox的模态或灯箱版本).我可以将它绑定到一个隐藏的锚标签并通过JavaScript激活该锚标签的click事件,但我宁愿直接启动Fancybox并避免额外的锚标记.

Answer 1

Fancybox目前不直接支持自动启动的方式.我能够工作的工作是创建一个隐藏的锚标签并触发它的点击事件.确保在包含jQuery和Fancybox JS文件之后包含触发click事件的调用.我使用的代码如下:

此示例脚本直接嵌入HTML中,但也可以包含在JS文件中.

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

Answer 2

我通过在文档准备中调用此函数来实现此功能:

$(document).ready(function () {
        $.fancybox({
            'width': '40%',
            'height': '40%',
            'autoScale': true,
            'transitionIn': 'fade',
            'transitionOut': 'fade',
            'type': 'iframe',
            'href': 'http://www.example.com'
        });
});

Answer 3

这很简单:

首先隐藏元素,如下所示:

<div id="hidden" style="display:none;">
    Hi this is hidden
</div>

然后调用你的javascript:

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

看看下面的图片:

另一个例子:

<div id="example2" style="display:none;">
        <img src="http://theinstitute.ieee.org/img/07tiProductsandServicesiStockphoto-1311258460873.jpg" />
    </div>

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

Answer 4

Window.load(与document.ready()相对)似乎是Fancybox 2.0的JSFiddler onload演示中使用的技巧:

$(window).load(function()
{
    $.fancybox("test");
});

请记住,你可能在其他地方使用document.ready(),IE9对两者的加载顺序感到不安.这为您提供了两个选项:将所有内容更改为window.load或使用setTimer().

Answer 5

或者在设置fancybox后在JS文件中使用它:

$('#link_id').trigger('click');

我相信Fancybox 1.2.1将使用默认选项,否则我需要执行此操作时的测试.

Answer 6

为什么不是这个答案呢？:

$("#manual2").click(function() {
    $.fancybox([
        'http://farm5.static.flickr.com/4044/4286199901_33844563eb.jpg',
        'http://farm3.static.flickr.com/2687/4220681515_cc4f42d6b9.jpg',
        {
            'href'  : 'http://farm5.static.flickr.com/4005/4213562882_851e92f326.jpg',
            'title' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit'
        }
    ], {
        'padding'           : 0,
        'transitionIn'      : 'none',
        'transitionOut'     : 'none',
        'type'              : 'image',
        'changeFade'        : 0
    });
});

现在只需触发你的链接!!

从Fancybox主页获得此信息

Answer 7

我发现的最好方法是:

<script type="text/javascript">
    $(document).ready(function() {
        $.fancybox(
             $("#WRAPPER_FOR_hidden_div_with_content_to_show").html(), //fancybox works perfect with hidden divs
             {
                  //fancybox options
             }
        );
    });
</script>