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

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

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

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

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

-- Ли

ОБНОВЛЕНИЕ:

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

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

javascript jquery fancybox
person Lee Englestone    schedule 11.11.2009    source источник
comment
Я никогда не пробовал, но похоже, что вам нужно использовать событие callbackOnClose, чтобы вызвать открытие другого.   -  person o.k.w    schedule 11.11.2009
comment
Хорошая аватарка... Случайное совпадение? или я должен быть польщен? ;-)   -  person scunliffe    schedule 11.11.2009
comment
scanliffe, давно нашел аватарку, и она ему понравилась. Боюсь, я не уверен, украл ли я его у вас или нет. Будьте немного польщены, если хотите. ;-)   -  person Lee Englestone    schedule 11.11.2009
comment
o.k.w правильно. используйте для этого функцию callBack. (Тем не менее, я обнаружил, что FancyBox немного привередлив. Сейчас я ищу новый плагин модального окна)   -  person DA.    schedule 11.11.2009
comment
Кажется, в сети мало информации о callbackOnClose. Какие примеры я могу посмотреть?   -  person Lee Englestone    schedule 11.11.2009

Ответы (3)


arrow_upward
6
arrow_downward

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

Хитрость? Отложите открытие второго с помощью таймера. Это ни в коем случае не идеальный ответ, он может вести себя странно, если таймер установлен слишком коротко, и не идеален, если установлен слишком долго. 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>
person o.k.w    schedule 12.11.2009
comment
Хм. Странно, оверлей не отображается для второго fancybox. У тебя та же проблема? хорошо? - person Lee Englestone; 12.11.2009
comment
О, если вы нажмете «Закрыть первый Fancybox», наложение будет для второго fancybox. Если его закрыть другим способом, оверлей не появится. Странный. В любом случае, у меня нет хорошего мнения о согласованности этого плагина. Что вы думаете? - person o.k.w; 12.11.2009

arrow_upward
2
arrow_downward

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

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

Таким образом, у вас не будет проблемы с наложением, на которую указал @o.k.w.

person pmgodin    schedule 22.10.2011

arrow_upward
0
arrow_downward

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

Версия 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');
person Sobin Augustine    schedule 18.05.2015