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

Question

我有两个fancybox，想从第一个打开第二个（可以通过按钮或关闭第一个来实现）。

<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关闭后打开第二个，或者通过点击第一个按钮来打开第二个。如何实现？不幸的是，我绑定事件没有什么好运气。-- Lee 更新：使用callbackOnClose可以让我做一些简单的事情，比如alert('hi')，但我还没有成功打开另一个Fancybox。

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

- Lee Englestone

---

我从未尝试过，但似乎你必须使用“callbackOnClose”事件来触发另一个打开。 - o.k.w

很好的头像...是巧合吗？还是我该感到受宠若惊？;-) - scunliffe

scunliffe，很久以前就发现了这个头像并喜欢它。不确定是否从您那里盗用了它，很抱歉。如果您喜欢的话，可以稍微有点荣幸。;-) - Lee Englestone

o.k.w是正确的。使用回调函数来实现。 （话虽如此，我发现FancyBox有点棘手。我目前正在寻找一个新的模态框插件） - DA.

网上似乎没有太多关于callbackOnClose的内容。有没有一些我可以参考的例子？ - Lee Englestone

Answer 1

好的，我终于让它工作了（我第一次使用fancybox）。看起来callbackOnClose在关闭时被调用，而不是在关闭后被调用。因此，在第一个完全关闭之后，第二个fancybox才能弹出。

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

脚本：

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

HTML:

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

- o.k.w

---

嗯，这很奇怪，第二个fancybox没有显示覆盖层。你有同样的问题吗？o.k.w？ - Lee Englestone

哦，如果你点击“关闭第一个Fancybox”，那么遮罩层将会出现在第二个Fancybox上。如果以其他方式关闭，遮罩层将不会出现。很奇怪。无论如何，我对这个插件的一致性没有好感。你觉得呢？ - o.k.w

Answer 2

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

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

这样，您就不会遇到@o.k.w指出的覆盖问题。

- pmgodin

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

- Sobin Augustine