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

Question

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

Answer 1

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

此示例脚本直接嵌入 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>

看看下面的图片：

enter image description here

另一个例子：

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

enter image description here

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>

Answer 8

对于我的情况，以下可以成功工作。页面加载后，立即弹出灯箱。

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>

Answer 9

亚历克斯的回答很棒。但需要注意的是，这调用了默认的 fancybox 样式。如果您有自己的自定义规则，您应该只调用 .trigger click 该特定锚点

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

Answer 10

我实际上设法使用“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 应该出现在加载状态！

HTH

Answer 11

也许这会有所帮助...这被用于全尺寸 jQuery 日历点击事件（http://arshaw.com/fullcalendar/）...但它可以更普遍地用于处理由jQuery。

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

Answer 12

您还可以使用原生 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>

Answer 13

如果您没有可点击的按钮。我的意思是，如果你想在 ajax 响应上打开它，那么它会是这样的：

$.fancybox({
      href: '#ID',
      padding   : 23,
      maxWidth  : 690,
      maxHeight : 345
});

Answer 14

$(document).ready(function() {
    $.fancybox(
      '<p>Yes. It works <p>',
       {
        'autoDimensions'    : false,
        'width'             : 400,
        'height'            : 200,
        'transitionIn'      : 'none',
        'transitionOut'     : 'none'
       }
    );
});

这会有帮助..

Answer 15

你可以这样放链接（它会被隐藏。可能会在

</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');
});

Answer 16

HTML：

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

JS：

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

Answer 17

使用 Fancybox 3.5.7 版本，我能够自动启动它，而无需任何额外的 Javascript。只需添加对 Fancybox“组”的引用作为 URL 中的锚链接即可。

例如，如果这是您的标记：

<a href="foo.jpg" data-fancybox="gallery">Click me</a>

只需使用以下链接：

https://example.org/slideshow.php#gallery-1

这会在页面加载时自动为我打开幻灯片！

Answer 18

<script type="text/javascript">
    $(document).ready(function() {
        $('[data-fancybox="gallery"]').click(); 
    });
</script>

最简单的解决方案是这样的

Answer 19

也许你可以使用jqmodal，它轻量且易于使用。您可以通过调用

显示模式框

$('.box').jqmShow()

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

问题描述投票：0回答：19

19个回答

最新问题

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

问题描述 投票：0回答：19

19个回答

最新问题

问题描述投票：0回答：19