How do I open one Fancybox after another closes?

Question

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

        
                      

              相关标签:
       
      

Answer 1

This is for fancyBox 1.3+. In order to use the timeOut trick propsed by @o.k.w most efficently, we need to know how much time the fadeOut of the fancyBox will take. With the new onClosed function we can use the currentOpts parameter.

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

This way you wont have the overlay problem pointed by @o.k.w.

Answer 2

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.

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.

Script:

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

Answer 3

Here is what I found as a workaround,

fancyBox version: 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');