Jump to content
  • 0

Задачка с FancyBox


StormMan
 Share

Question

Друзья, такая задачка. Есть высплывающее окно 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);        }    });});

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

Link to comment
Share on other sites

4 answers to this question

Recommended Posts

  • 0

Вы на http://jsfiddle.net залейте пример который пощупать можно, я ещё вчера пару идей придумал, но теоретические догадки без практической подоплёки писать не хочу

Edited by Николя223
Link to comment
Share on other sites

  • 0

А почему нельзя эти галереи в одном окне открывать, подгружая с помощью ajax? 

XZibit был бы рад вашему решению с открытием всплывающего окна из всплывающего окна, но почему бы не реализовать открытие элемента галереи в том же окне, указав ссылку назад?

Edited by Radiocity
Link to comment
Share on other sites

  • 0

Друзья, спасибо за ответы :)

 

В общем, мне подсказали один вариант на другом форуме. Вот он, это вариант: http://jsfiddle.net/StormMan/xKC3q/

 

Способ, о котором почему-то мне не пришло идеи.. )) Считаю проблему решённой, но, возможно, есть и другие способы?

Link to comment
Share on other sites

  • 0

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

  • Like 1
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy