Come faccio ad aprire un Fancybox dopo l'altro si chiude?

Question

Ho 2 fancyboxes e sto cercando di aprire il secondo dal primo (o da pulsante o chiudendo la prima) ..

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

Il primo Fancybox viene attivato al caricamento della pagina ..

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

Voglio essere in grado di aprire la seconda fancybox ogni volta che il primo è chiuso. O .. aprire la seconda dal clic sul pulsante nella prima.

Come si raggiunge questo obiettivo? Io non sto avendo molta fortuna legame con gli eventi temo.

- Lee

UPDATE:

Utilizzando callbackOnClose mi permette di fare cose semplici, come alert ( 'ciao'), ma non sono riuscito ad aprire un altro Fancybox.

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

Answer 1

Ok, finalmente ho potuto farlo funzionare (il mio primo incontro con fancybox). Sembra che callbackOnClose è chiamato chiusura, non dopo la chiusura. Quindi il secondo fancybox non può apparire fino a dopo il primo completamente chiuso.

Il trucco? Ritardare l'apertura della seconda utilizzando un temporizzatore. Questo non è affatto la risposta perfetta, potrebbe comportarsi in modo strano se il timer impostato è troppo breve, e non è l'ideale se impostato troppo a lungo. 100ms funziona per me. Ecco il codice.

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

Questo è per Fancybox 1.3+. Per poter utilizzare il trucco timeOut, proposto da @ o.k.w più modo efficiente, abbiamo bisogno di sapere quanto tempo la fadeOut della Fancybox prenderà. Con la nuova funzione di onClosed possiamo utilizzare il parametro currentOpts.

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

In questo modo non avrai il problema di sovrapposizione puntato da @ o.k.w.

Answer 3

Ecco quello che ho trovato come soluzione alternativa,

  

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