Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 26.12.2013, 22:10
Интересующийся
Отправить личное сообщение для StormMan Посмотреть профиль Найти все сообщения от StormMan
 
Регистрация: 08.06.2010
Сообщений: 11

Задачка с 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, 27.12.2013 в 02:50.
Ответить с цитированием
  #2 (permalink)  
Старый 26.12.2013, 22:42
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

StormMan,
массив -- при открытии потомка сохранять о себе метку -- так цепочка будет любой длины - потомок никого не открывал при закрытии проверяет массив - запускает первого по цепочке - и удаляет эту ссылку -- если запускать некого массив пуст просто закрываемся
Ответить с цитированием
  #3 (permalink)  
Старый 27.12.2013, 00:27
Интересующийся
Отправить личное сообщение для StormMan Посмотреть профиль Найти все сообщения от StormMan
 
Регистрация: 08.06.2010
Сообщений: 11

рони, большое спасибо за схему. Но я не очень представляю, как это реализовать на практике
Ответить с цитированием
  #4 (permalink)  
Старый 27.12.2013, 00:35
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

StormMan,
поделитесь как вы из одного fancybox другое fancybox по цепочке открываите
Ответить с цитированием
  #5 (permalink)  
Старый 27.12.2013, 01:51
Интересующийся
Отправить личное сообщение для StormMan Посмотреть профиль Найти все сообщения от StormMan
 
Регистрация: 08.06.2010
Сообщений: 11

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

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


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

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

Последний раз редактировалось StormMan, 27.12.2013 в 02:50.
Ответить с цитированием
  #6 (permalink)  
Старый 27.12.2013, 02:04
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

StormMan,
вы повторили 1 пост ...???
Ответить с цитированием
  #7 (permalink)  
Старый 27.12.2013, 02:06
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

StormMan,
раскройте секрет как из одного fancybox запустить другое
Сообщение от StormMan
FancyBox так устроен, что при открытии нового окна из родительского, родительское закрывается.
как получить данный эффект?
Ответить с цитированием
  #8 (permalink)  
Старый 27.12.2013, 02:38
Интересующийся
Отправить личное сообщение для StormMan Посмотреть профиль Найти все сообщения от StormMan
 
Регистрация: 08.06.2010
Сообщений: 11

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

Создаём контейнер, который будет родительским окном:
<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, 27.12.2013 в 21:18.
Ответить с цитированием
  #9 (permalink)  
Старый 27.12.2013, 02:58
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

StormMan,
ок
Ответить с цитированием
  #10 (permalink)  
Старый 27.12.2013, 04:17
Интересующийся
Отправить личное сообщение для StormMan Посмотреть профиль Найти все сообщения от StormMan
 
Регистрация: 08.06.2010
Сообщений: 11

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
FancyBox переопределяет вертикальный скролл ? ilyas-> Элементы интерфейса 14 08.11.2014 16:55
fancybox и AJAX alzasr jQuery 4 19.01.2014 22:45
Помогите с fancyBox Le-mark43 Events/DOM/Window 6 20.12.2012 08:08
Проблемы с Fancybox и ajax-контентом Viper jQuery 1 24.03.2011 23:42
Fancybox 1.2 и доп. скрипт Nevil jQuery 3 20.01.2011 12:37