Question

我有两个fancyboxes，我试图从第一个打开第二个（通过按钮或关闭第一个）..

<div id="firstFancybox" style="display:none">
   <p>I'm the first Fancybox!</p>
   <a id="fancyboxButton" href="#secondFancybox">Close first Fancybox</a>
</div>

<a id="hiddenLink" href="#firstFancybox"></a>

<div id="secondFancybox" style="display:none">
   <p>I'm the second Fancybox!</p>
</div>

第一个Fancybox正在页面加载时激活。

$(document).ready(function() {
    $("a#hiddenLink").fancybox({ 'hideOnContentClick': false, 'frameWidth': 300, 'frameHeight': 300 }).trigger('click');
    $("a#fancyboxButton").fancybox();
    });

我希望能够在第一个关闭时打开第二个fancybox。或者......点击第一个按钮打开第二个。

这是如何实现的？我对运动的恐惧并没有太大的帮助。

- 李

更新：

使用callbackOnClose允许我做一些简单的事情，比如alert（'hi'），但我还没设法打开另一个Fancybox。

    $(document).ready(function() {
        $("a#hiddenLink").fancybox({ 'hideOnContentClick': false, 'frameWidth': 300, 'frameHeight': 300, 
        callbackOnClose: function() { alert('hi'); } 
        }).trigger('click');
    });

Answer 1

好的，我终于开始工作了（我第一次遇到fancybox）。似乎在关闭时调用callbackOnClose，而不是在关闭后调用$(document).ready(function() { $("a#hiddenLink").fancybox({ 'hideOnContentClick': false, 'frameWidth': 300, 'frameHeight': 300, callbackOnClose: function() { window.setTimeout('open2()',100); } }).trigger('click'); }); function open2(){ $("a#fancyboxButton").fancybox().trigger('click'); }。因此，第二个fancybox在第一个完全关闭之后才能弹出。

诀窍？使用计时器延迟打开第二个。这绝不是完美的答案，如果定时器设置得太短会表现得很奇怪，如果设置得太长则不理想。 100ms适合我。这是代码。

脚本：

<div id="firstFancybox" style="display:none">
   <p>I'm the first Fancybox!</p>
   <a href="#" onclick="open2();">Close first Fancybox</a>
</div>
<a id="hiddenLink" href="#firstFancybox"><!--for first fancy box--></a>
<a id="fancyboxButton" href="#secondFancybox"><!--for second fancy box--></a>

HTML：

{{1}}

Answer 2

这适用于fancyBox 1.3+。为了最有效地使用@ o.k.w提供的timeOut技巧，我们需要知道fancyBox的fadeOut需要多长时间。使用新的onClosed函数，我们可以使用currentOpts参数。

$("a[rel='fancy1']").fancybox({
    onClosed: function(currentArray, currentIndex, currentOpts){
        setTimeout(function(){$("a[rel='fancy2']").click();},currentOpts.speedOut);
    }
});

这样你就不会遇到@ o.k.w指出的叠加问题。

Answer 3

以下是我发现的解决方法，

fancyBox版本：2

$("#first_fancybox_link").fancybox({        
    afterClose:function(){  
        $("#second_fancybox_link").fancybox({ 
            helpers:  {
                overlay : null
            },
            afterShow:function(){   
                $.fancybox.helpers.overlay.open({parent: $('body')});
            }
        }).trigger('click');
    }
}).trigger('click');

如何在另一个关闭后打开一个Fancybox？

3 个答案: