Категория:
Опубликовано:

Методы и события Colorbox

Список методов и событий поддерживаемых плагином Colorbox.

Методы:

$.colorbox() Вызов Colorbox без присвоенного элемента. $.colorbox({href:"login.php"});
$.colorbox.next() $.colorbox.prev() Методы позволяющие переключать элементы по аналогии с нажатием кнопок "next" и "previous".
$.colorbox.close() Этот метод инициирует закрытие последовательности. Лайтбокс будет полностью закрыт только после событий cbox_closed OnClosed.
$.colorbox.element() Этот метод используется для вывода текущего HTML связанного с Colorbox. Возвращает объект jQuery содержащий элемент. var $element = $.colorbox.element();
$.colorbox.resize() Позволяет Colorbox'у принимать размер автоматически, на основании расчетов размеров текущего контента.
$.colorbox.remove() Удаляет все данные Colorbox из документа. В дальнейшем использования Colorbox будет невозможным.

События:

// Пример построения слайдшоу:
$(document).bind('cbox_complete', function(){
  setTimeout($.colorbox.next, 1500);
});
cbox_open Триггер срабатывает когда Colorbox открыт впервые в документе.
cbox_load Срабатывает вначале обработки, во время определения типа загружаемого контента.
cbox_complete Триггер после срабатывает когда контент загружен.
cbox_cleanup Срабатывает перед закрытием.
cbox_closed После закрытия

Коллбеки:

onOpen false Перед открытием.
onLoad false Перед загрузкой контента.
onComplete false После того, как контент показан.
onCleanup false Перед закрытием.
onClosed false После закрытия Colorbox.

Источник.

Теги: 
Если у Вас возникли вопросы, замечания, предложения или просто благодарность - пишите в комментариях.
Делитесь полезными материалами в социальных сетях.

Комментарии

Как при закрытии окна colorbox обновить родительскую страницу?
У меня на странице есть ссылка: a class="colorbox-node" href="]]>http://papagena.hd.free.fr/administrer-des-lien?width=40%25&height=60%25"]]> /a
По ссылке открывается окно, где я ставлю/снимаю с публикации ноды, находящиеся на родительской странице. Изменения видны после закрытия окна colorbox и обновления страницы. Я хотел бы видеть изменения сразу. Как вариант, я попробовал дописать к ссылке: &onClosed=parent.location.reload(), чтоб обновлялась страница после закрытия окна colorbox. Но - не сработало.
Подскажите пожалуйста, что дописать к ссылке.
ПС. сайт делаю на друпал.

Используйте что-нибудь вроде этого:
$(document).bind('cbox_cleanup', function(){
  location.reload();
});
Можно без перезагрузки, ajax'ом:
$(document).bind('cbox_cleanup', function(){
  var href = $(location).attr("href");
  $.ajax({ 
    type: "GET",
    url: href,
    success: function(data){
      if(data != ""){
        $("body").html(data);
      }
	}
  });
});

Спасибо за Ваши ответы, к сожалению я не знаю как этим воспользоваться. Я надеялся, что можно к URL дописать что-то вроде "destination="... А куда вставлять скрипт я не знаю. Но спасибо.

Нет, дописав назначение в конец ссылки Вы не добьетесь нужного результата.

Скрипт нужно подключить к Вашему сайту.

Советую ознакомится со способами реализации подобного - еще не раз пригодится в будущем.

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

P.S. После включения модуля будет происходить AJAX-перезагрузка страницы каждый раз при закрытии Colorbox'а.

Спасибо за Вашу помощь!
Ваш модуль работает, перегружает страницу.
Но у меня возникли проблемы... 1) после такой перезагрузки пропадает административное меню, вместо него просто видна белая полоса (исправляется обычным обновлением страницы); 2) в открывающемся окне Colorbox'а есть другие ссылки, и если перейти по такой ссылке и закрыть окно, то в будущем первая ссылка не работает, то есть открывает окно но не подгружает содержимое. (исправляется также обычным обновлением страницы). Если желаете увидеть, я могу показать экран в скайпе...

Админ-меню пропадает из-за того что перезагружается весь body и все скрипты повторно. Для предотвращения подобного поведения нужно изучать тему оформления сайта.

К сожалению сейчас нет времени углубляться.

В этом варианте модуля происходит обычная перезагрузка страницы.

Прошлый модуль отключите, удалите с админки и с сервера, после загрузите и установите этот модуль.

Спасибо - работает!
ПС: если важно то тема - Bartik 7.39
ПСС: а есть возможность отключать эту функцию для некоторых окон?

Модуль, в данном виде, не имеет никаких настроек.

Для colorbox-node можно задать параметры окна width и height в пикселях или процентах к экрану. А как указать параметры в процентах к ноде? Или
заставить colorbox принимать размер текущего контента (ноды)?

Все можно сделать js'ом.

Здесь более детальное описание всех функций Colorbox'а.

Добавить комментарий