Галерея jQuery lightBox

Сегодня речь пойдет о jQuery lightBox. Этот плагин часто и успешно применяется во многих проектах для решения задачи вывода на экран увеличенного изображения в фотогалерее.

Автор данного плагина Leandro Vieira Pinho. Создал он его на основе аналогичного плагина Lightbox (автор Lokesh Dhakar), использующего библиотеку prototype.

По традиции сразу же пример использования.

Проверено в:

• IE 6-8
• Firefox 3
• Opera 9.5-10
• Safari 3
• Chrome 7

Что качать?

• Библиотеку jquery качаем или загружаем с Google;
• Cам плагин jquery.lightbox-0.5.js (20.07 Kb) или его запакованную версию jquery.lightbox-0.5.pack.js (6.27 Kb);
• Сопроводительные материалы (6.91 Kb) — CSS и картинки.

Быстрый старт

Подключаем CSS и библиотеки:

<link href="css/jquery.lightbox-0.5.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.pack.js"></script>

HTML предельно прост и логичен. Фото (img), обернутое ссылкой на увеличенную версию этого же фото:

<a href="pic/pic1.jpg"><img src="pic/pic1-thumb.jpg" height="113px" width="150px" alt=""/></a>

Инициализируем галерею:

<script type="text/javascript">
jQuery(function(){
	jQuery("a").lightBox();
});
</script>

Конечно, в боевых условиях вешать галерею на все ссылки не стоит. Неплохим решением будет использовать класс или id для родителя картинок, например, так: jQuery("#gallery a").lightBox().

А теперь подробнее

Как обычно, плагин можно настроить с помощью параметров функции lightBox():

Параметры lightBox()

Пример инициализации плагина с использованием параметров:

<script type="text/javascript">
jQuery(function(){
jQuery(".gallery").lightBox({
	overlayBgColor: '#FFF',
	overlayOpacity: 0.6,
	imageLoading: 'img/loading.gif',
	imageBtnClose: 'img/close.gif',
	imageBtnPrev: 'img/prev.gif',
	imageBtnNext: 'img/next.gif',
	containerResizeSpeed: 350,
	txtImage: 'Изображение',
	txtOf: 'из'
   });
});
</script>

Нестандартное оформление

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

Меняем картинки

Итак, пути к новым картинкам заданы с помощью imageLoading, imageBtnClose, imageBtnPrev и imageBtnNext. Но что, если сами картинки отличаются по размеру? Не проблема. Редактируем jquery.lightbox-0.5.css:

#lightbox-secNav-btnClose { /* стили отвечают за кнопку закрыть */
	width: 66px; /* можно смело поменять ширину */
	float: right; /* ... и позиционирование */
	padding-bottom: 0.7em;	
}

Что касается кнопок «следующая», «предыдущая», то в большинстве случаев менять стили не нужно. Так как сама кнопка существенно больше своей фоновой картинки и занимает почти половину фотографии. Это достаточно удобно — не нужно щелкать именно по надписи. Достаточно клацнуть, например, «куда-то слева» и получим переход на предыдущую фоту. Если все-таки нужно изменить кликабильную область — редактируем правила для #lightbox-nav-btnPrev и #lightbox-nav-btnNext.

Подписи под картинками

При желании, можно задать индивидуальные подписи каждой увеличенной картинке. В этом вопросе плагин тоже оказался на высоте. Подписи задаются очень простым и логичным способом — атрибутом title для тега a:

<a href="pic/pic1.jpg" title="Описание рисунка"><img src="pic/pic1-thumb.jpg" height="113px" width="150px" alt=""/></a>

Фон для большого фото

Параметр overlayBgColor задает цвет фона для заливки страницы. А если нужно поменять фон у большого фото, опять придется править стили.

#lightbox-container-image-box{
	background-color: #fff; /* это фон непосредственно под картинкой */
}
#lightbox-container-image-data-box {
	background-color: #fff; /* а это фон под надписями */
}

Убираем ненужные элементы

А если мне нужно только увеличенное фото вообще без панельки с подписями? Нет проблем! Идем в стили и добавляем display:none:

#lightbox-container-image-data { /* это правило отвечает за панель с текстом */
	padding: 0 10px;  /* можно настроить отступы... */
	color: #666; /* ... цвет шрифта (понятно, что не только цвет - смело добавляй любые необходимые стили) */
	display:none; /* А этой строки изначально нет. Добавляем ее, если панель не нужна. */
}

Немного труднее убрать только надпись «Изображение X из N». Ее правило имеет селектор #lightbox-image-details-currentNumber. Просто display:none; тут не прокатит, т.к. скрипт переставит его на display: block. Ничего страшного! Просто перебиваем его с помощью !important:

#lightbox-image-details-currentNumber {
	display:none!important;
}

Демо-пример — та же галерея, но с более тонкой настройкой.

Проверено в:

• IE 6-8
• Firefox 3
• Opera 9.5-10
• Safari 3
• Chrome 7

Сюрприз от IE6 (в quirks mode)

Как всегда ложка дегтя от старого осла. В IE6 в режиме обратной совместимости замечен баг — панель с текстом несколько уже, чем панель с рисунком.

К сожалению, стилями это поправить не выйдет — за ширину отвечает скрипт. Соответственно, если нужно избавляться от бага (а это нужно не всегда — во многих сайтах панель с текстом в таких галереях просто скрывают), то и править нужно скрипты. Один из вариантов, найти в тексте плагина строчку:

$('#lightbox-container-image-data-box').css({ width: intImageWidth });

…и перед ней вставить насильное увеличение ширины для осла. Что-то типа такого:

if ($.browser.msie && $.browser.version == 6) intImageWidth+=settings.containerBorderSize*2;
$('#lightbox-container-image-data-box').css({ width: intImageWidth });

Само-собой такое вмешательство уже не позволит использовать запакованную версию плагина (или вынудит перепаковать).

Плюсы:

• адекватно работает во всех популярных браузерах;
• не требует создания нелогичных HTML конструкций, дополнительных классов или атрибутов;
• простая в настройке и привязке.

Материалы:

• jquery plugin :: lightBox
• prototype plugin :: Lightbox2