JQuery. Лайтбоксы и подключаемый модуль ColorBox

1 июля 2012 | Автор: | Категория: JQuery и PHP

Лайтбоксы применяются для отображения полноценных по размеру версий каких-либо миниатюрных изображений (фотографий) в модальном диалоговом окне (например, при создании слайд-шоу или галереи изображений). При этом, обычно применяется эффект затемнения заднего плана, с целью показать, что он деактивирован.

Лайтбоксы и подключаемый модуль ColorBox

Если посетитель хочет продолжить работать с этой веб-страницей, ему необходимо будет выполнить какие-то действия с изображением (щёлкнуть по нему, нажать на стрелку перехода к следующей фотографии, щёлкнуть по кнопке Закрыть и т.д.)

В JQuery имеется несколько отличных подключаемых модулей, обеспечивающих мощный функционал по созданию лайтбокс-эффектов, один из них — ColorBox.

Чтобы немного разобраться в том, как реализуется функционал лайтбоксов, я сначала занялся созданием собственного лайтбокса, без каких-либо наворотов, а затем попробовал применить модуль ColorBox.

Создание собственного лайтбокс-эффекта:

В коде HTML документа нужно добавить к тегу <a> классовое имя сlass со значением lightbox. Остальной необходимый функционал будет добавляться в файл стилей и непосредственно самого jquery-скрипта.

<a href="photo/dzhetli.jpg" title="Джет Ли" class="lightbox"><img src="photo/dzhetli.jpg" alt="Джет Ли" class="photos"></a>

Для реализации эффекта затемнения экрана, после вывода изображения, используется большой элемент div, по высоте и ширине соответствующий экрану монитора. Внутри него размещается ещё один div, в который будет загружаться изображение.

#lightbox_overlay {
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
background:black url(loader.gif) no-repeat scroll center center;
}
#lightbox_container {
position:absolute;
border:10px ridge #ccc;
}

К лайтбокс-ссылке добавляется обработчик click. При клике по уменьшенной версии изображения на страницу будет добавляться тёмный элемент (lightbox_overlay), контейнер для изображения (lightbox_container) и само изображение.

$('a.lightbox').click(function(e) {
 
$('body').css('overflow-y', 'hidden');
 
$('<div id="lightbox_overlay"></div>')
.css('top', $(document).scrollTop())
.css('opacity', '0')
.animate({'opacity': '0.5'}, 'slow')
.appendTo('body');
 
$('<div id="lightbox_container"></div>')
.hide()
.appendTo('body');
 
$('<img />')
.attr('src', $(this).attr('href'))
.load(function(){positionLightboxImage();})
.appendTo('#lightbox_container');
 
$('body').click(function(){removeLightbox();});
 
return false;
});

Элемент lightbox_overlay позиционируется в верхней части экрана, для создания фонового эффекта его прозрачность изменяется от невидимого состояния до значения 0.5 (50%). Контейнер для загрузки изображения добавляется на страницу и сразу скрывается. Затем в него добавляется изображение, его атрибут src настраивается при помощи метода attr, который применяют для извлечения и настройки любых атрибутов элемента DOM. Обработчик событий load инициализируется, когда изображение загружено на 100%.

function positionLightboxImage(){
var top = ($(window).height() - $('#lightbox_container').height()) / 2;
var left = ($(window).width() - $('#lightbox_container').width()) / 2;
$('#lightbox_container')
.css({
'top': top + $(document).scrollTop(),
'left': left
})
.fadeIn(1500);
}

Функция positionLightboxImage() отвечает за отображение изображения по центру экрана. Для вычисления центральной точки, высота и ширина изображения вычитаются из высоты и ширины окна, полученное значение делится на 2.
При выводе полноценного размера изображения на экран используется изменения прозрачности.

function removeLightbox(){
$('#lightbox_overlay, #lightbox_container')
.fadeOut('slow', function(){
$(this).remove();
$('body').css('overflow-y', 'auto');
});
}

Функция removeLightbox() отвечает за удаление лайтбокс-эффекта, когда пользователь кликнет в любом месте на странице. Для этого применяется изменение прозрачности элементов, после чего они убираются.

Использование подключаемого модуля ColorBox:

Скачать модуль можно здесь. В архиве предлагается несколько папок с примерами реализации лайтбокс-эффектов. В одной из этих папок нужно скопировать css-файл стилей, файл с изображениями и сам модуль ColorBox. А затем подключить их в коде HTML документа.

<link rel="stylesheet" type="text/css" href="colorbox.css" />
<script type='text/javascript' src='library/jquery.colorbox.js'></script>

Для всех изображений, которые необходимо сгруппировать, нужно добавить атрибут rel=»acteur», и вызвать метод colorbox.

$('a[rel="acteur"]').colorbox();

Всё должно отлично работать. У метода есть множество опций, которыми можно манипулировать. Их полный список можно посмотреть на странице плагина. В моём примере я использовал, только некоторые из них.

$('a[rel="acteur"]').colorbox({
transition: 'fade',
opacity: 0.5,
speed: 350,
current: "{current} из {total} фотографий с Джеки Чаном"
});

Посмотреть, что получилось можно здесь.

Скачать все файлы примера JQuery_Example2.zip

За основу для написания сегодняшней статьи были взяты примеры из книги «Изучаем jQuery», авторы Эрл Каслдайн и Крэйг Шарки. Книга написана доступным и понятным языком, приводится множество практических примеров. Если решите тоже заняться изучением JQuery, советую к прочтению.

1 комментарий к "JQuery. Лайтбоксы и подключаемый модуль ColorBox"

  1. Константин | 3 июля 2012 @ 17:13
  2. Не сразу понял, что верхняя фотография это скрипн ColorBox :)

    Ответить

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *