Задачка с 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,
ок |
Как всё-таки можно решить проблему?
|
StormMan,
вот такие пляски с бубнами ... :write:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
<link rel="stylesheet" type="text/css" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css">
<script type='text/javascript' src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
<script>
$(function () {
var main = 0,
info = 0,
no_show = true;
$('.fancyboxmain').each(function (index, item) {
$(item).fancybox({
type: 'inline',
afterClose: function () {
main = index
}
});
});
$('.fancyboxinfo').each(function (index, item) {
$(item).fancybox({
type: 'inline',
'beforeLoad': function () {
info = index
},
'afterClose': function () {
setTimeout(function () {
if (no_show) $(".fancyboxmain").eq(main).trigger('click')
}, 300);
}
});
});
$('.fancyboximg').fancybox({
'beforeLoad': function () {
no_show = false
},
'afterClose': function () {
setTimeout(function () {
no_show = true;
$(".fancyboxinfo").eq(info).trigger('click')
}, 300);
}
});
})
</script>
</head>
<body>
<div style="display: none; width: 680px;" id="fancyboxmain" > Родительское окно
<div style="display: none; width: 680px;" id="fancyboxinfo1" > Дочернее окно 1 с галереей
<a href="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" class='fancyboximg' data-fancybox-group='g1' rel='g1'>
<img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif">
</a>
<a href="http://fancyapps.com/fancybox/demo/1_b.jpg" class='fancyboximg' data-fancybox-group='g1' rel='g1'>
<img src="http://fancyapps.com/fancybox/demo/1_s.jpg">
</a>
</div>
<div style="display: none; width: 680px;" id="fancyboxinfo2" > Дочернее окно 2 с галереей
<a href="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" class='fancyboximg' data-fancybox-group='g2' rel='g2'>
<img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif">
</a>
<a href="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" class='fancyboximg' data-fancybox-group='g2' rel='g2'>
<img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif">
</a>
</div>
<a class="fancyboxinfo" href="#fancyboxinfo1">Открыть дочернее окно 1</a>
<a class="fancyboxinfo" href="#fancyboxinfo2">Открыть дочернее окно 2</a>
</div>
<a class="fancyboxmain" href="#fancyboxmain" style="color: #FF1493">Открыть родительское окно</a>
</body>
</html>
|
рони, от всей души огромное вам спасибо! Работает :)
|
| Часовой пояс GMT +3, время: 20:13. |