Лайтбоксы применяются для отображения полноценных по размеру версий каких-либо миниатюрных изображений (фотографий) в модальном диалоговом окне (например, при создании слайд-шоу или галереи изображений). При этом, обычно применяется эффект затемнения заднего плана, с целью показать, что он деактивирован.
Если посетитель хочет продолжить работать с этой веб-страницей, ему необходимо будет выполнить какие-то действия с изображением (щёлкнуть по нему, нажать на стрелку перехода к следующей фотографии, щёлкнуть по кнопке Закрыть и т.д.)
В 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, советую к прочтению.
Не сразу понял, что верхняя фотография это скрипн ColorBox :)