Как я могу открыть один Fancybox за другим закрывается?

Question

У меня есть 2 причудливых ящика, и я пытаюсь открыть второе с первого (либо кнопкой, либо закрыв первое)..

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

Первый Fancybox активируется при загрузке страницы.

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

Я хочу иметь возможность открывать вторую коробку фантазии, когда первая закрыта. Или.. откройте второй, нажав кнопку в первом.

Как это достигается? Боюсь, мне не везет с событиями.

- Ли

ОБНОВИТЬ:

Использование callbackOnClose позволяет мне делать простые вещи, такие как оповещение ("привет"), но мне пока не удалось открыть еще одну Fancybox.

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

Answer 1

Хорошо, я наконец получил его на работу (мое первое знакомство с fancybox). Кажется, что callbackOnClose вызывается после закрытия, а не после закрытия. Следовательно, второй необычный ящик не может появиться до тех пор, пока первый полностью не закроется.

Трюк? Задержка открытия второго с помощью таймера. Это ни в коем случае не идеальный ответ, он может вести себя странно, если установлен слишком короткий таймер, и не идеален, если установлен слишком длинный. 100 мс работает для меня. Вот код

Авторсценария:

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

Это для fancyBox 1.3+. Чтобы наиболее эффективно использовать трюк timeOut, предложенный @okw, нам нужно знать, сколько времени займет fadeOut fancyBox. С новой функцией onClosed мы можем использовать параметр currentOpts.

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

Таким образом, у вас не будет проблемы с оверлеем, указанной @okw

Answer 3

Вот что я нашел в качестве обходного пути,

версия 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');