Задачка с FancyBox
 

Друзья, такая задачка. Есть высплывающее окно fancybox, в котором список ссылок аля галерея, при клике на каждую из них открывается новое всплывающее окно, в котором, в свою очередь, другая галерея, опять же при клике на каждую открывается новое всплывающее окно. FancyBox так устроен, что при открытии нового окна из родительского, родительское закрывается. Задача в том, чтобы при закрытии дочерних окон открывались обратно родительские.

Сделать такое с парой окон, назовём её "родитель-потомок", довольно просто - используем для открытия родительского окна callback afterClose. Например:
(код выдран из длинного листинга, поэтому кое-что там лишнее, не имеющее значения, самое главное я прокомментировал)

$('.fancyboxinfo').each(function(index, item) {
    $(item).fancybox({
        closeClick: true,
        beforeLoad: function() {
            window.last = this.element; // по этому имени будем его открывать после закрытия дочернего
        }
    });
});
$(".fancyboxphotos").each(function(index, item) {
    $(item).find('a.fancyboximg').fancybox({
        closeBtn: true,
        closeClick: true,
        afterClose: function() {
            setTimeout(function() {
                jQuery(window.last).trigger('click')
            }, 300); // открываем родительское окно после закрытия
        }
    });
});

А теперь добавляем третье окно. Я добавил его в начало, пусть оно будет самым первым "родителем". То есть, сперва у нас открыто первое окно fancyboxmain. Кликаем в нём на ссылку, это окно закрывается и открывается fancyboxinfo. В нём также кликаем ссылку, оно закрывается и открывается окно fancyboxphotos. Затем мы закрываем fancyboxphotos, открывается опять fancyboxinfo. Данная цепочка работает (в примере ниже), однако после закрытия fancyboxinfo самое первое окно, конечно же, не открывается:

$('.fancyboxmain').each(function(index, item) {
    $(item).fancybox({
        closeClick: false
    });
});
$('.fancyboxinfo').each(function(index, item) {
    $(item).fancybox({
        closeClick: true,
        beforeLoad: function() {
            window.last = this.element;
        }
    });
});
$(".fancyboxphotos").each(function(index, item) {
    $(item).find('a.fancyboximg').fancybox({
        closeBtn: true,
        closeClick: true,
        afterClose: function() {
            setTimeout(function() {
                jQuery(window.last).trigger('click')
            }, 300);
        }
   });
});

Друзья, подскажите, что можно сделать, чтобы после закрытия fancyboxinfo открывалось fancyboxmain?

Я пробовал добавить afterClose для fancyboxinfo, но получается проблема: при переходе от fancyboxinfo к fancyboxphotos первое закрывается, так устроен FancyBox, и соответственно срабатывает afterClose, перекидывающее нас к окну fancyboxinfo и не дающее открыться окну fancyboxphotos. Получается замкнутый круг - в цепочку больше двух окон поставить не получается. Вод пример такого не работающего кода:

$('.fancyboxmain').each(function(index, item) {
    $(item).fancybox({
        closeClick: false
        beforeLoad: function() {
            window.first= this.element;
        }
    });
});
$('.fancyboxinfo').each(function(index, item) {
    $(item).fancybox({
        closeClick: true,
        beforeLoad: function() {
            window.last = this.element;
        }
        afterClose: function() {
            setTimeout(function() {
                jQuery(window.first).trigger('click')
            }, 300);
        }
    });
});
$(".fancyboxphotos").each(function(index, item) {
    $(item).find('a.fancyboximg').fancybox({
        closeBtn : true,
        closeClick : true,
        afterClose: function() {
            setTimeout(function() {
                jQuery(window.last).trigger('click')
            }, 300);
        }
    });
});

Как всё-таки можно решить эту проблему? Чтобы начиная с первого окно и доходя до третьего, при закрытии мы снова возвращались к первому?

StormMan,
массив -- при открытии потомка сохранять о себе метку -- так цепочка будет любой длины - потомок никого не открывал при закрытии проверяет массив - запускает первого по цепочке - и удаляет эту ссылку -- если запускать некого массив пуст просто закрываемся

рони, большое спасибо за схему. Но я не очень представляю, как это реализовать на практике :(

StormMan,
поделитесь как вы из одного fancybox другое fancybox по цепочке открываите

Для родительского окна, например, .fancyboxinfo, задаём имя, в нашем примере это last:

beforeLoad: function() { // функция выполнится до загрузки окна
    window.last = this.element; // дали окну имя
}

Это имя будет использоваться коллбеком afterClose дочернего окна .fancyboxphotos:

afterClose: function() { // функция выполнится после закрытия дочернего окна
    setTimeout(function() {
        jQuery(window.last).trigger('click') // эта функция открывает родительское окно
    }, 300);
}

StormMan,
вы повторили 1 пост ...???

StormMan,
раскройте секрет как из одного fancybox запустить другое как получить данный эффект?

рони, я неправильно понял ваш вопрос)

Создаём контейнер, который будет родительским окном:

<div style="display: none; width: 680px;" id="fancyboxmain" class="fancyboxmain">
...
</div>

И ссылку, которая будет его открывать:

<a class="fancyboxmain" href="#fancyboxmain" style="color: white">Открыть родительское окно</a>

Затем в контейнер помещаем другие контейнеры или галереи картинок по аналогии. В итоге получается что-то вроде:

<div style="display: none; width: 680px;" id="fancyboxmain" class="fancyboxmain">    Родительское окно
    <div style="display: none; width: 680px;" id="fancyboxinfo1" class="fancyboxinfo">    Дочернее окно 1 с галереей
        <a href="picturefullsize11.jpg" class='fancyboximg' data-fancybox-group='g1' rel='g1'>
            <img src="picturesmall11.jpg">
        </a>
        <a href="picturefullsize12.jpg" class='fancyboximg' data-fancybox-group='g1' rel='g1'>
            <img src="picturesmall12.jpg">
        </a>
    </div>
    <div style="display: none; width: 680px;" id="fancyboxinfo2" class="fancyboxinfo">    Дочернее окно 2 с галереей
        <a href="picturefullsize21.jpg" class='fancyboximg' data-fancybox-group='g2' rel='g2'>
            <img src="picturesmall11.jpg">
        </a>
        <a href="picturefullsize22.jpg" class='fancyboximg' data-fancybox-group='g2' rel='g2'>
            <img src="picturesmall12.jpg">
        </a>
    </div>
    <a class="fancyboxinfo" href="#fancyboxinfo1">Открыть дочернее окно 1</a>
    <a class="fancyboxinfo" href="#fancyboxinfo2">Открыть дочернее окно 2</a>
</div>
<a class="fancyboxmain" href="#fancyboxmain" style="color: white">Открыть родительское окно</a>

Как-то так.. Код не проверял, но вроде должно работать.

StormMan,
ок

Как всё-таки можно решить проблему?