如何在另一个关闭后打开一个Fancybox？ [英] How do I open one Fancybox after another closes?

问题描述

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

I have 2 fancyboxes and am trying to open the second from the first (either by button or by closing the first)..

<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在页面加载时被激活..

The first Fancybox is being activated on page load..

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

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

I want to be able to open the second fancybox whenever the first one is closed. Or.. open the second one from clicking the button in the first.

这是如何实现的？我对运动恐怕没有多少运气。

How is this achieved? I'm not having much luck binding to events i'm afraid.

- 李

更新：

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

Using callbackOnClose is allowing me to do simple stuff, like alert('hi'), but i've not managed to open another Fancybox yet.

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

推荐答案

好的，我终于开始工作了（我的第一个遇到fancybox）。似乎 callbackOnClose 在关闭时调用，而不是在关闭后调用。因此第二个fancybox在第一个完全关闭之后才能弹出。

Ok, I finally got it to work (my first encounter with fancybox). It seems that callbackOnClose is called upon closing, not after closing. Hence the second fancybox cannot pop up until after the first one closed completely.

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

The trick? Delay the opening of the second one by using a timer. This is by no means the perfect answer, could behave oddly if timer is set too short, and not ideal if set too long. 100ms works for me. Here's the code.

脚本：

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

这篇关于如何在另一个关闭后打开一个Fancybox？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！