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

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

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

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.

-- Lee

UPDATE :

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

Answer 1

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 2

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