Xiper

Галерея 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()

Название параметра Описание значение по умолчанию
overlayBgColor цвет фона #000
overlayOpacity прозрачность 0.8
imageLoading адрес картинки с gif-анимацией загрузки images/lightbox-ico-loading.gif
imageBtnClose адрес картинки с кнопкой закрытия images/lightbox-btn-close.gif
imageBtnPrev адрес картинки с кнопкой перехода к предыдущему изображению images/lightbox-btn-close.gif
imageBtnNext адрес картинки с кнопкой перехода к следующему изображению images/lightbox-btn-close.gif
containerBorderSize padding контейнера с изображением, заданный в пикселях (использовать осторожно — иногда бажит) 10
containerResizeSpeed длительность анимации при изменении размеров контейнера с изображением в миллисекундах 400
fixedNavigation флаг, показывает, будут ли навигационные стрелки видны постоянно или только появляться при наведении false
txtImage в подписи к изображению заменяем слово "Image" на необходимое значение (например, подпись "Image 2 of 8" можно заменить на "Изображение 2 of 8") Image
txtOf в подписи к изображению заменяем слово "of" на необходимое значение (например, подпись "Image 2 of 8" можно заменить на "Image 2 из 8") of
keyToClose клавиша закрытия c (close)
keyToPrev клавиша перехода к предыдущему изображению p (previous)
keyToNext клавиша перехода к следующему изображению n (next)

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

<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 в режиме обратной совместимости замечен баг — панель с текстом несколько уже, чем панель с рисунком.

баг в 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