25 ноября 2014 в 15:51
1
Здравствуйте.
Прошу помощи.
Не силен в js, но возникла срочная задача, которую не могу решить без скрипта.
Подскажите, как можно добраться до содержимого выведенного в Colorbox? И до элементов самого Colorbox'a (интересует конкретно элемент счетчика "current of total").
Содержимое выводится с помощью colorbox-node (colorbox-node-gallery), без iframe.
Комментарии
FF + FireBug || Chrome + F12
Я вроде пробовал, те селекторы которые отвечают за необходимую мне информацию не откликаются.
Возможно я использую неправильные события... Сейчас активируется при "$(document).ready"
Можно вообще сочетать инфу из colorbox'а на странице под ним?
используйте $(window).load - это более позднее событие
window load событие выполняется немного поpже: когда вся страница, включая графику, фреймы, обьекты, загружена в окно браузера. Поэтому, если выполнение логики ваших скриптов зависит от размеров изображений, используйте $(window).load
а разве при всплывании колорбокса $(document).ready и $(window).load обновляются? И вообще, вы учитываете, что контент колорбокса присутствует в DOM только тогда, когда колорбокс открыт?
Я это понимаю, но не имею опыта и познаний в этой области. Потому и прошу помощи.
При каком событии можно добраться до colorbox'a? Какой триггер? Как можно его подцепить при переключении на следующий слайд? Или при изменении порядкового номера слайда..?
Ищите в кодах скриптов колорбокса обработчики кликов.
Вам надо использовать также события через $(selector).live(
А какое событие можно использовать для .live()? Пробовал 'click' - работает. Есть ли событие отвечающее за появление селектора в дереве? 'load' и 'focus' не срабатывают 'change' тоже.
P.S. использую $('#cboxCurrent') - количество слайдов.
http://www.jacklmoore.com/colorbox/
В самом низу раздел "Event Hooks"
Огромное спасибо! Практически то что нужно.
Максимально приближенно работает 'cbox_complete'. Но он вызывается до появления содержимого, и соответственно при первой загрузке Colorbox'a еще нет информации о $('#cboxCurrent'). И при переключении отображает инфу с переключаемого слайда, но тут можно математикой решить.
Может кто подскажет альтернативный способ? Задача заключается в том, чтобы скролить страницу в соответствии с переключением слайдов.
А зачем куда-то скроллить страницу при первой загрузке колорбокса?
Ок. Рассказываю задание полностью:
Вьюха с изображениями. Вместо пейджера - Views Infinite Scroll.
По умолчанию загружается n элементов, остальные подгружаются по скроллу.
При клике открывается Cbox с контентом, но отображаются только n слайдов (загруженных во вьюхе).
Нужно при достижении, например элемента (n-3) скроллить для загрузки следующей страницы вьюхи. Для того, чтоб Cbox не нужно было закрывать и открывать повторно.
А, ну и соответственно пользователь может кликнуть на последнее изображение, и тогда уже сразу нужно будет скроллить.
ну так всё равно при первом клике скролл не нужен, потому что нельзя просто так взять и
пройти в мордоркликнуть на элемент, который за пределами экрана.Но в вашей ситуации намного интереснее другой момент: догружаются ли новые элементы при скроллинге страницы с открытым колорбоксом? И как на это реагирует #colorboxCurrent? Если счётчик обновляется хотя бы при перелистывании, то не вижу никакой проблемы
Colorbox открывает весь контент с одинаковым атрибутом (rel). Реагирует абсолютно адекватно, и именно так как нужно (проверено ручным скроллом).
...можно. Проверено опытным путем. Элемент может быть на экране частично, при этом его уже можно будет кликнуть, но его позиция будет еще недостаточна для открытия следующей страницы.
А элементы галереи одинаковой высоты? Если да, то может просто навесить обработчик, чтобы по клику на колорбокс или ссыль с его атрибутом сразу крутил страницу на нужное количество пикселей?
Элементы одинаковой высоты, но расположены "inline". В реальности 1 страница = 4 строки по 6 пикч (24 на странице).
Про
не совсем понял. Точнее вообще не понял...
Я вроде так и хочу делать, при достижении, скажем, 21-го элемента - скролить на размер 1-й страницы вниз.
ненене. Я о том, что если в строке 6 картинок, то нужно по каждому клику скроллить на 1/6 высоты картинки (высоту считать вместе со всеми margin и padding). А на ссылку с rel=colorbox повесить скролл на высоту целой картинки. В таком случае, даже если кликнут на последний элемент страницы, следующая строка всё равно подгрузится.
Всем спасибо!
Задача решена, за исключением мелких недочетов.
Я там немного с другой стороны подошел к вопросу. Высчитывал номер строки, опускал на её высоту... Если кому будет интересно - выложу код.