Плагин «ColorBox-x» – больше возможностей

Color Powered logo Из всех свободно распространяемых решний типа Lightbox больше всего мне нравится ColorBox, поэтому первым делом, тестируя MaxSite, я подключил плагин «ColorBox» автора DRiVER и тут же изменил его под свои нужды. Мой вариант задуман для использования совместно с также измененным Random gallery Максима, который теперь в сайдбаре генерирует произвольное число миниатюр, пряча «лишние» с помощью свойства display: none.
Дело было еще в феврале 2011, при работе над jenWeb.info, но опубликовать руки дошли только сейчас. Кроме того, в процессе подготовки публикации функционал расширился.

Внимание! плагин не есть законченное расширение Plug and Play для MaxSite! Это скорее пища для беспокойного ума и пытливых ручек Для публикации я ничего не адаптировал обратно к коду оригинального плагина, при необходимости, например, отбор по классам или группам надо делать применительно к своим конкретным условиям.
Плагин не тестировался с версией Maxsite 0.5 (у меня до сих пор 0.437), но там нет ничего такого. что не могло бы работать с последней версией (кроме самой библиотеки jQuery, которая из-за бага в 1.6.0 должна быть либо младше, либо старше этой версии).
Если кому-то интересно. но сам не умеет — помогу.

Кто еще не начал зевать — читаем дальше.

Как это выглядит:

Основные отличия от варианта DRiVER'а:

  • Большее количество настроек в админке.
  • Независимое отбражение картинок в сайдбаре и основном контенте.
  • Дополнительный стиль отбражения (5 «из коробки» и 1 мой)
  • Используется только тег [gallery]…[/gallery] (или <div class="gallery"> соответственно), режим слайдшоу задается в настройках.
  • Опционально после просмотра слайдшоу ColorBox закрывается автоматически.
  • Ну и чупачупс: изменение непрозрачности миниатюры при наведении курсора.

Последнего можно достигнуть в том числе и независимо от ColorBox несколькими строчками jQuery (или плавного появления красивой рамочки, или чего ваша фантазия пожелает :).)

Мне хватает затуманивания со средней скоростью:


$(document).ready(function() {
	$("a.custom-link,a.cboxElement").hover(function() {
		$(this).find("img").stop(true, true).fadeTo("medium",0.5);
	}, function() {
		$(this).find("img").stop(true, true).fadeTo("medium",1);
	});
});

При отдельном использовании не забудьте подставить свои классы, по которым jQuery будет находить картинки.

А вот с выключением ColorBox после слайдшоу, к сожалению, сложнее.


// alert($(".page_content div").hasClass('gallery'));
if($(".page_content div").hasClass('gallery') === true)
{
var $slideshow_gal = $("a[rel='cb-gal']"), timeout;
$(document).bind('cbox_complete', function(){
	if($slideshow_gal.index($.colorbox.element()) == $slideshow_gal.length - 1
	&&
	$(".cboxSlideshow_on #cboxSlideshow").css('display')=='block')
	{
		timeout = setTimeout($.colorbox.close,$.colorbox.settings.slideshowSpeed);
	}
}).bind('cbox_cleanup cbox_load', function(){
	clearTimeout(timeout);
});
$slideshow_gal.colorbox({loop:false});
}
// alert($("#sidebar div").hasClass('random-gal'));
if($("#sidebar div").hasClass('random-gal') === true)
{
var $slideshow_rand = $("a[rel='cb-rand']"), timeout;
$(document).bind('cbox_complete', function(){
	if(($slideshow_rand.index($.colorbox.element()) == $slideshow_rand.length - 1)
	&&
	$(".cboxSlideshow_on #cboxSlideshow").css('display')=='block')
	{
		timeout = setTimeout($.colorbox.close,$.colorbox.settings.slideshowSpeed);
	}
}).bind('cbox_cleanup cbox_load', function(){
	clearTimeout(timeout);
});
$slideshow_rand.colorbox({loop:false});
}

Оригинальный код автора ColorBox Jack Moore.

Для двух групп
a[rel='cb-gal'],a[rel='cb-rand']

практически одинаковый код увеличивается вдвое, и оптимизировать я его не смог.
А если групп 3, 4?
Есть еще одно добавление, которое коснулось управления ColorBox с клавиатуры, а именно старт/стоп слайдшоу клавишей пробела. Пришлось лезть в основной код ColoBox. Наверное, можно предложить автору, Jack Moore, добавить это дополнение в следующие релизы, но пока ему не писал.

Как это работает, видно на страницах jenWeb info.
Кто заинтересовался — попробуйте. Если будут проблемы, помогу, насколько в моих силах.

Upd 2011-06-07 16:30 При проверке настроек модифицированного Random gallery в разных сочетаниях обнаружил недоделки, которые помогли выявить косяки в «ColorBox-x». Исправил, перезалил.

P.S. Виноват, у оригинального плагина есть страница настроек в админке! Исправил в списке отличий.

P.P.S. Открыв скриншот админки, столкнулся с досадным пробелом в функционале любимого ColorBox: если включено ограничение картинки размерами окна браузера, нет возможности просмотреть ее в полном размере (скажем, в браузере курсор в этом случае превращается в лупу с плюсиком). Здесь это не реализовано. Пошел в поддержку и конечно, нашел этот вопрос. И ответ автора, мол, извините, он не видит простого решения проблемы .

Скачать плагин «ColorBox-x»

Loading comments …   ←   Плагин «ColorBox-x» – больше возможностей

Fields marked with asterix are required.


Max 40 alpha-numeric characters, including spaces.


Valid email. Max 255 characters. Not displayed publicly.

*