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

95

我想在页面加载时启动Fancybox（例如Fancybox的模态或灯箱版本）。我可以将其绑定到隐藏的锚标记并通过JavaScript触发该锚标记的click事件，但我宁愿直接启动Fancybox并避免使用多余的锚标记。

jquery  jquery-plugins  fancybox 
— 布莱格
source
如果您访问官方的fancybox网站（fancybox.net），则它们会自动弹出，因此您可以检查其页面来源以查看其操作方式（提示：与接受的答案不同）
— Nippysaurus
15
为了节省其他时间-$（function（）{$ .fancybox（'<div> Change me </ div>'，{padding：20}）;}）;
— nikib3ro 2012年

Answers:

162

Fancybox当前不直接支持自动启动的方法。我能够解决的问题是创建一个隐藏的锚标记并触发它的click事件。确保包含jQuery和Fancybox JS文件之后包含触发click事件的调用。我使用的代码如下：

该示例脚本直接嵌入HTML中，但也可以包含在JS文件中。

<script type="text/javascript">
    $(document).ready(function() {
        $("#hidden_link").fancybox().trigger('click');
    });
</script>
— 布莱格
source
1
仅供参考，$（document）.ready（function（）{$（“＃hidden_​​link”）。fancybox（）。trigger（'click'）;}）; 等同于：函数LaunchFancyBox（）{$（“＃hidden_​​link”）。fancybox（）。trigger（'click'）; } $（document）.ready（LaunchFancyBox（））;
— Mark Schultheiss
4
是相同的$(document).ready(LaunchFancyBox());应该是$(document).ready(LaunchFancyBox);。（请注意，最后没有函数调用）。
— 亚当·路德
我确实尝试过，但是没有成功。我必须通过Ajax加载内容，然后调用$ .fancybox（{...传递内容
— 。– giubueno 2012年
@Blegger您的解决方案$（“＃hidden_​​link”）。fancybox（）。trigger（'click'）; 对我来说很完美。
— Mukesh
66

我通过在准备就绪的文档中调用此函数来使其工作：

$(document).ready(function () {
        $.fancybox({
            'width': '40%',
            'height': '40%',
            'autoScale': true,
            'transitionIn': 'fade',
            'transitionOut': 'fade',
            'type': 'iframe',
            'href': 'http://www.example.com'
        });
});
— 乔丹
source
这对我不起作用，因为处理href参数时出现了问题。“等待”动画将永远显示。
— 鲍里斯·范舒滕2011年
3
值得注意的是，这似乎是fancybox开发人员自己的方法。如果您访问fancybox网站（fancybox.net），应该会看到一个模式对话框，告诉您“ fancybox2已发布！” ...如果您查看该页面的源代码，则可以看到他们使用了此答案中描述的技术。
— Nippysaurus 2011年
这应该是公认的答案！公认的解决方案正在起作用，但是添加隐藏锚来触发单击事件并不是真正最干净的锚，对吗？
— luigi7up 2013年
同意，使用隐藏链接是黑客。做对了。
— Jamsi 2014年
很简单！谢谢！我有一个自动播放的YouTube嵌入其中。视频播放完毕后，是否可以关闭灯箱广告？
— 安东尼奥·阿尔梅达
12

这很简单：

首先将元素隐藏起来，如下所示： 

<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>

在此处输入图片说明

— 希瑟姆·穆尼尔
source
10

Window.load（与document.ready（）相对）似乎是Fancybox 2.0的JSFiddler onload演示中使用的技巧：

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

切记，您可能在其他地方使用document.ready（），而IE9会对两者的加载顺序感到不满。这给您留下两个选择：将所有内容更改为window.load或使用setTimer（）。

— 克里斯·S
source
当我希望页面以类似ios的警告开头开始然后能够将其关闭时，此答案对我而言更好。当我尝试实现它时，最受欢迎的答案就是如此，每当我单击fancybox.close时，它都会重新加载而不是消失。谢谢！
— 纳撒尼尔·弗里克
先生，您的回答最相关，而且100％正确。谢谢。
— 沙尔克·肯（Schalk Keun）
8

或在设置您的花哨框后在JS文件中使用此命令：

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

我相信Fancybox 1.2.1会在需要时使用默认选项，否则会从我的测试中使用默认选项。

— cynge13
source
5

为什么这不是答案之一？：

$("#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主页获得

— 汤玛士
source
5

我发现的最好方法是：

<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>
— 竞技场
source
这将失败，因为对选项的右括号进行了注释。
— Teekin 2011年
¡清洁易行！完美的作品。谢谢！
— 卡罗来纳州
4

就我而言，以下内容可以成功运行。加载页面后，灯箱会立即弹出。

jQuery的：1.4.2

Fancybox：1.3.1

<body onload="$('#aLink').trigger('click');">
<a id="aLink" href="http://www.google.com" >Link</a></body>

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

        $("#aLink").fancybox({
            'width'             : '75%',
            'height'            : '75%',
            'autoScale'         : false,
            'transitionIn'      : 'none',
            'transitionOut'     : 'none',
            'type'              : 'iframe'
        });
    });
</script>
— CMen
source
3

亚历克斯的答案很好。但重要的是要注意，它调用了默认的花式框样式。如果您有自己的自定义规则，则只需致电.trigger单击该特定锚

$(document).ready(function() {
$("#hidden_link").fancybox({ 
    'padding':          0,
    'cyclic':       true,
    'width':        625,
    'height':       350,
    'padding':      0, 
    'margin':      0, 
    'speedIn':      300,
    'speedOut':     300,
    'transitionIn': 'elastic',
    'transitionOut': 'elastic',
    'easingIn':     'swing',
    'easingOut':    'swing',
    'titleShow' : false
}); 
    $("#hidden_link").trigger('click');
});
— 安德鲁·斯科特·金雷
source
2

我实际上设法仅使用“ live”事件从外部JS文件触发了fancyBox链接：

首先，在您未来的动态锚点上添加实时点击事件：

$('a.pub').live('click', function() {
  $(this).fancybox(... fancybox parameters ...);
})

然后，将锚点附加到主体上：

$('body').append('<a class="iframe pub" href="your-url.html"></a>');

然后通过“单击”锚点触发fancyBox：

$('a.pub').click();

fancyBox链接现在“几乎”准备就绪。为什么“差不多”？因为看起来您需要在触发第二次单击之前添加一些延迟，否则脚本尚未准备就绪。

在锚点上使用一些动画会造成快速而肮脏的延迟，但效果很好：

$('a.pub').slideDown('fast', function() {
  $('a.pub').click();
});

在这里，您的fancyBox应该出现在加载状态！

高温超导

— 胶囊
source
1

也许这会有所帮助。。。这已在完整的jQuery日历单击事件（http://arshaw.com/fullcalendar/）中使用了...但是可以更普遍地用于处理jQuery启动的fancybox。

  eventClick: function(calEvent, jsEvent, view) {
      jQuery("body").after('<a id="link_'+calEvent.url+'" style="display: hidden;" href="http://thisweekinblackness.com/wp-content/uploads/2009/01/steve-urkel.jpg">Steve</a>');
      jQuery('#link_'+calEvent.url).fancybox(); 
      jQuery('#link_'+calEvent.url).click();
      jQuery('#link_'+calEvent.url).remove();
    return false;
  }
— 利
source
1

您还可以使用本机JavaScript函数setTimeout()在DOM准备好后延迟框的显示。

<a id="reference-first" href="#reference-first-message">Test the Popup</a>

<div style="display: none;">
    <div id="reference-first-message" style="width:400px;height:100px;overflow:auto;">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis mi eu elit tempor facilisis id et neque. Nulla sit amet sem sapien. Vestibulum imperdiet porta ante ac ornare. Nulla et lorem eu nibh adipiscing ultricies nec at lacus. Cras laoreet ultricies sem, at blandit mi eleifend aliquam. Nunc enim ipsum, vehicula non pretium varius, cursus ac tortor. Vivamus fringilla congue laoreet. Quisque ultrices sodales orci, quis rhoncus justo auctor in. Phasellus dui eros, bibendum eu feugiat ornare, faucibus eu mi. Nunc aliquet tempus sem, id aliquam diam varius ac. Maecenas nisl nunc, molestie vitae eleifend vel, iaculis sed magna. Aenean tempus lacus vitae orci posuere porttitor eget non felis. Donec lectus elit, aliquam nec eleifend sit amet, vestibulum sed nunc.
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function() {
        $("#reference-first").fancybox({
            'titlePosition'         : 'inside',
            'transitionIn'          : 'fade',
            'transitionOut'         : 'fade',
            'overlayColor'          : '#333',
            'overlayOpacity'        : 0.9
        }).trigger("click");

        //launch on load after 5 second delay
        window.setTimeout('$("#reference-first")', 5000);
    });
</script>
— 约翰·卡里
source
1

如果您没有要单击的按钮。我的意思是，如果您想在ajax响应上打开它，则将是这样的：

$.fancybox({
      href: '#ID',
      padding   : 23,
      maxWidth  : 690,
      maxHeight : 345
});
— Maha Dev
source
1 
$(document).ready(function() {
    $.fancybox(
      '<p>Yes. It works <p>',
       {
        'autoDimensions'    : false,
        'width'             : 400,
        'height'            : 200,
        'transitionIn'      : 'none',
        'transitionOut'     : 'none'
       }
    );
});

这会有所帮助..

— 普巴拉加兰
source
0

您可以像这样放置链接（它将被隐藏。可能在之前</body>）

<a id="clickbanner" href="image.jpg" rel="gallery"></a>

像这样工作的rel属性或类

$(document).ready(function() {
    $("a[rel=gallery]").fancybox({
        openEffect  : 'elastic',
        closeEffect : 'elastic',
        maxWidth    : 800,
        maxHeight   : 600
    });
});

只需使用jQuery触发器功能即可 

$( window ).load(function() {
  $("#clickbanner").trigger('click');
});
— 尼西斯
source
0

HTML：

<a id="hidden_link" href="LinkToImage"></a>

JS：

<script type="text/javascript">
    $(document).ready(function() {
        $("#hidden_link").fancybox().trigger('click');
    });
</script>
— 阿纳斯·萨菲
source
1
尽管此代码可以回答问题，但提供有关如何和/或为什么解决问题的其他上下文将提高​​答案的长期价值。
— Nic3500 '18
-1

也许您可以使用jqmodal，它轻巧易用。您可以通过调用显示模式框

$('.box').jqmShow()
— 边缘
source
我认为这行不通，因为那不是FancyBox的类
— Jose Basilio
1
我的设计师想要Fancybox的外观，但我不希望尝试为jqmodal实现它。另外，我们已经在网站上使用了Fancybox，但我不想支持两种不同的灯箱固定件。
— Blegger
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.