Question

我想在页面加载时启动Fancybox（例如Fancybox's版本的模态或灯箱）。我可以将它绑定到一个隐藏的锚标签并通过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>

查看下图：

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 {{（与document.ready（）相反）似乎是JSFiddler onload demos of Fancybox 2.0中使用的技巧：

$(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 homepage

获得此信息

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单击该特定锚点

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

您也可以使用本机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 12

也许这会有所帮助......这在全尺寸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;
  }

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

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

来显示模态框

$('.box').jqmShow()

Answer 16

你可以像这样放置链接（它将被隐藏。可能在</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 17

HTML：

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

JS：

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

Answer 18

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

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

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

只需使用以下链接：

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

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

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

18 个答案: