How can I open one fancybox after another?

Question

I have 2 fancyboxes and I'm trying to open the second of 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 activated when the page loads.

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

I want to open the second fancybox whenever the first is closed. Or .. open the second by clicking the button in the first.

How is this achieved? I am not very lucky with the events that I fear.

- Lee

UPDATE:

Using callbackOnClose allows me to do simple things like alert ('hi'), but I have not yet been able to open another Fancybox.

  $(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 meeting with fancybox). It seems that callbackOnClose is called closing, not after closing. Therefore, the second fancybox cannot appear until the first is completely closed.

Trick? Finish opening the second with a timer. This is by no means an ideal answer; it can behave strangely if the timer is set too short and not ideal if it is too long. 100ms works for me. Here is 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+. To make the most effective use of the timeOut trick requisitioned with @okw, we need to know how long fadeOut 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 will not have an overlay problem specified by @okw

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