[Решено] Подскажите нахождение содержимого из Colorbox в дереве DOM

Главные вкладки

Аватар пользователя bumble bumble 25 ноября 2014 в 15:51
1

Здравствуйте.

Прошу помощи.
Не силен в js, но возникла срочная задача, которую не могу решить без скрипта.

Подскажите, как можно добраться до содержимого выведенного в Colorbox? И до элементов самого Colorbox'a (интересует конкретно элемент счетчика "current of total").

Содержимое выводится с помощью colorbox-node (colorbox-node-gallery), без iframe.

Комментарии

Аватар пользователя bumble bumble 26 ноября 2014 в 14:10

Я вроде пробовал, те селекторы которые отвечают за необходимую мне информацию не откликаются.

Возможно я использую неправильные события... Сейчас активируется при "$(document).ready"

Можно вообще сочетать инфу из colorbox'а на странице под ним?

Аватар пользователя sas@drupal.org sas@drupal.org 27 ноября 2014 в 10:23

используйте $(window).load - это более позднее событие

window load событие выполняется немного поpже: когда вся страница, включая графику, фреймы, обьекты, загружена в окно браузера. Поэтому, если выполнение логики ваших скриптов зависит от размеров изображений, используйте $(window).load

Аватар пользователя gun_dose gun_dose 27 ноября 2014 в 10:36

а разве при всплывании колорбокса $(document).ready и $(window).load обновляются? И вообще, вы учитываете, что контент колорбокса присутствует в DOM только тогда, когда колорбокс открыт?

Аватар пользователя bumble bumble 27 ноября 2014 в 12:08

Quote:
... И вообще, вы учитываете, что контент колорбокса присутствует в DOM только тогда, когда колорбокс открыт?

Я это понимаю, но не имею опыта и познаний в этой области. Потому и прошу помощи.

При каком событии можно добраться до colorbox'a? Какой триггер? Как можно его подцепить при переключении на следующий слайд? Или при изменении порядкового номера слайда..?

Аватар пользователя gun_dose gun_dose 27 ноября 2014 в 12:30

"bumble" wrote:
При каком событии можно добраться до colorbox'a? Какой триггер? Как можно его подцепить при переключении на следующий слайд? Или при изменении порядкового номера слайда..?

Ищите в кодах скриптов колорбокса обработчики кликов.

Аватар пользователя sas@drupal.org sas@drupal.org 27 ноября 2014 в 13:48

"bumble" wrote:
те селекторы которые отвечают за необходимую мне информацию не откликаются

Вам надо использовать также события через $(selector).live(

Аватар пользователя bumble bumble 27 ноября 2014 в 14:46

"<a href="mailto:sas@drupal.org">sas@drupal.org</a>" wrote:
Вам надо использовать также события через $(selector).live(

А какое событие можно использовать для .live()? Пробовал 'click' - работает. Есть ли событие отвечающее за появление селектора в дереве? 'load' и 'focus' не срабатывают 'change' тоже.

P.S. использую $('#cboxCurrent') - количество слайдов.

Аватар пользователя bumble bumble 27 ноября 2014 в 15:41

"orion76" wrote:

http://www.jacklmoore.com/colorbox/

В самом низу раздел "Event Hooks"

Огромное спасибо! Практически то что нужно.

Максимально приближенно работает 'cbox_complete'. Но он вызывается до появления содержимого, и соответственно при первой загрузке Colorbox'a еще нет информации о $('#cboxCurrent'). И при переключении отображает инфу с переключаемого слайда, но тут можно математикой решить.

Может кто подскажет альтернативный способ? Задача заключается в том, чтобы скролить страницу в соответствии с переключением слайдов.

Аватар пользователя gun_dose gun_dose 27 ноября 2014 в 16:07

"bumble" wrote:
Максимально приближенно работает 'cbox_complete'. Но он вызывается до появления содержимого, и соответственно при первой загрузке Colorbox'a еще нет информации о $('#cboxCurrent'). И при переключении отображает инфу с переключаемого слайда, но тут можно математикой решить.
Задача заключается в том, чтобы скролить страницу в соответствии с переключением слайдов.

А зачем куда-то скроллить страницу при первой загрузке колорбокса?

Аватар пользователя bumble bumble 25 декабря 2015 в 15:17

Ок. Рассказываю задание полностью:

Вьюха с изображениями. Вместо пейджера - Views Infinite Scroll.
По умолчанию загружается n элементов, остальные подгружаются по скроллу.
При клике открывается Cbox с контентом, но отображаются только n слайдов (загруженных во вьюхе).

Нужно при достижении, например элемента (n-3) скроллить для загрузки следующей страницы вьюхи. Для того, чтоб Cbox не нужно было закрывать и открывать повторно.

Аватар пользователя bumble bumble 27 ноября 2014 в 16:24

А, ну и соответственно пользователь может кликнуть на последнее изображение, и тогда уже сразу нужно будет скроллить.

Аватар пользователя gun_dose gun_dose 27 ноября 2014 в 16:30

ну так всё равно при первом клике скролл не нужен, потому что нельзя просто так взять и пройти в мордор кликнуть на элемент, который за пределами экрана.

Но в вашей ситуации намного интереснее другой момент: догружаются ли новые элементы при скроллинге страницы с открытым колорбоксом? И как на это реагирует #colorboxCurrent? Если счётчик обновляется хотя бы при перелистывании, то не вижу никакой проблемы

Аватар пользователя bumble bumble 27 ноября 2014 в 16:36

Colorbox открывает весь контент с одинаковым атрибутом (rel). Реагирует абсолютно адекватно, и именно так как нужно (проверено ручным скроллом).

"gun_dose" wrote:
ну так всё равно при первом клике скролл не нужен, потому что нельзя просто так взять и пройти в мордор кликнуть на элемент, который за пределами экрана.

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

Аватар пользователя gun_dose gun_dose 27 ноября 2014 в 16:40

А элементы галереи одинаковой высоты? Если да, то может просто навесить обработчик, чтобы по клику на колорбокс или ссыль с его атрибутом сразу крутил страницу на нужное количество пикселей?

Аватар пользователя bumble bumble 27 ноября 2014 в 16:49

Элементы одинаковой высоты, но расположены "inline". В реальности 1 страница = 4 строки по 6 пикч (24 на странице).

Про

"gun_dose" wrote:
...чтобы по клику на колорбокс или ссыль с его атрибутом сразу крутил страницу на нужное количество пикселей

не совсем понял. Точнее вообще не понял...

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

Аватар пользователя gun_dose gun_dose 27 ноября 2014 в 20:26

ненене. Я о том, что если в строке 6 картинок, то нужно по каждому клику скроллить на 1/6 высоты картинки (высоту считать вместе со всеми margin и padding). А на ссылку с rel=colorbox повесить скролл на высоту целой картинки. В таком случае, даже если кликнут на последний элемент страницы, следующая строка всё равно подгрузится.

Аватар пользователя bumble bumble 27 ноября 2014 в 20:34

"gun_dose" wrote:

Я там немного с другой стороны подошел к вопросу. Высчитывал номер строки, опускал на её высоту... Если кому будет интересно - выложу код.