¿Cómo se abre una FancyBox tras otro se cierra?

Question

Tengo 2 fancyboxes y estoy tratando de abrir la segunda de la primera (ya sea por botón o mediante el cierre de la primera) ..

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

El primer FancyBox se activa al cargar la página ..

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

Quiero ser capaz de abrir la segunda FancyBox cada vez que el primero está cerrado. O .. abrir el segundo de clic en el botón en el primer lugar.

¿Cómo se logra esto? No estoy teniendo mucha suerte unión a eventos me temo.

- Lee

ACTUALIZACIÓN:

El uso de callbackOnClose me permite hacer cosas simples, como alert ( 'hola'), pero no he conseguido abrir otra FancyBox todavía.

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

Answer 1

Ok, finalmente tengo que trabajar (mi primer encuentro con FancyBox). Parece que callbackOnClose se llama al cierre, no después del cierre. Por lo tanto el segundo FancyBox no puede aparecer hasta después de la primera uno completamente cerrada.

El truco? Retrasar la apertura de la segunda mediante el uso de un temporizador. Esto es de ninguna manera la respuesta perfecta, podría comportarse de forma extraña si el temporizador está ajustado demasiado corto, y no es ideal si se fija demasiado larga. 100ms funciona para mí. Aquí está el código.

Guión:

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

Esto es para FancyBox 1.3+. Para utilizar el truco timeOut ha propsed por @ o.k.w más eficientemente, lo que necesitamos saber cuánto tiempo el fadeOut del FancyBox tomará. Con la nueva función onClosed podemos utilizar el parámetro currentOpts.

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

De esta manera usted no tendrá el problema de superposición señalado por @ o.k.w.

Answer 3

Esto es lo que he encontrado como solución alternativa,

  

versión 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');