Галерея на сайт с помощью Lightbox2

Сегодня наш разговор пойдет о том, как установить красивый модуль Lightbox2  для показа изображений поверх текущей страницы. Модуль прост в установке и работает во всех современных браузерах.
LightBox2 это JS-библиотека, которая при клике на уменьшенную копию картинки открывает полную версию картинки на той же странице с различными красивыми эффектами.

Преимущества LightBox2:

• Наборы изображений: группировка похожих изображений и удобная навигация по ним
• Смена изображений: автоматическая смена изображений группы, включая возможность запуска/остановки слайдшоу и кнопок перехода к предыдущему и следующему изображениям
• Поддержка содержания: использование фильтров и возможность показа HTML-содержания в lightbox.
• Поддержка видео: возможность показа видео в lightbox
• Визуальные эффекты: красивая предзагрузка и открытие изображнения
• Клавиатурные сочетания: удобное использование клавиатурных сочетаний для переключения между изображениями, запуском/остановкой слайдшоу и т.д.
• Возможность масштабирования: большие изображения будут уменьшены до размеров, которые позволяют им поместиться в окне браузера. В этом случае будет доступна кнопка, которая позволяет увидеть изображение в оригинальном размере
• Автоматическое определение изображений: автоматическое переформатирование миниатюр, которое позволяет не добавлять запись rel=”lightbox” к каждой ссылке на изображение. Эта возможность совместима с модулями Image, Inline, Flickr, Image Assist и ImageField. Также возможно использование своих CSS-классов, которые будут приводить к показу изображения с помощью модуля Lightbox2
• Поддержка ImageCache: добавление форматтера поля Lightbox2 для ImageFields и использовании его в видах
• Ссылка на страницу изображения: ссылка на страницу изображения может быть доступна из слоя lightbox
• Возможность исключения страниц: исключение определённых страниц из области действия эффектов Lightbox2
• Поддержка формы входа в аккаунт: возможность изменять все ссылки и вывод формы входа в аккаунт в накладываемом слое
• Настройка оформления и анимации: настройка порядка и скорости анимации, включая настройку цветов, размеров границ и тонирования накладываемого слоя
• Поддержка Gallery 2: поддержка изображений Gallery 2 через модуль Gallery

Ну а теперь несколько слов о самой библиотеке. Реализвана она на языке javascript с использованием ajax-движка Prototype Framework и библиотеки Scriptaculous Effects. Работает по заверению авторов во всех современных браузерах. Мне удалось проверить это на Opera 11, Firefox 17, IE 8 и Chrome 23 – проблем с работоспособностью обнаружено не было.

Подключение самой библиотеки на удивление просто и выполняется в два шага:

1. Сначала подключаются js-библиотеки и стили отображения для окна просмотра:

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript"
src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

При этом нужно обратить внимание на то, чтобы указанные в css-стиле файлы prev.gif и next.gif, существовали и располагались там где нужно. Также нужно обратить внимание на файлы loading.gif и close.gif, которые объявляются в файле lightbox.js.

2. Для того чтобы картинка открывалась при помощи lightbox, нужно добавить аттрибут rel=”lightbox” в тег ссылки на картинку. Заголовок, если таковой требуется, можно разместить в аттрибуте title. Например, так:

<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

Если необходимо разместить несколько логически связанных изображений и организовать навигацию между ними в окошке просмотра, то нужно разместить в аттрибуте rel=”lightbox” название группы в квадратных скобках для каждого связанного изображения:

<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>

Архив библиотеки со всеми необходимыми файлами внутри доступен по адресу http://lokeshdhakar.com/projects/lightbox2/

Видео

В lightbox можно показывать видеоклипы. Для этого, в атрибут rel нужно добавить запись lightvideo. Возможно также группировать видео и управлять размером lightbox, установив свойства width и height. Свойства могут быть настроены как lightvideo[group|width:300px;height:200px;] и lightvideo[|width:300px;height:200px;}{подпись к видео]. Свойства всегда записываются в формате property: value; (обратите внимание на закрывающее двоеточие). Если свойства не установлены, применяются стандартные значения — 400px по ширине и по высоте. Посмотрите примеры ниже.

Базовый пример:

<a href="http://video.google.com/videoplay?docid=1811233136844420765" rel="lightvideo">Google video example - default size</a>

Базовый пример с подписью:

<a href="http://video.google.com/videoplay?docid=1811233136844420765" rel="lightvideo[][подпись к видео]">Google video example - default size</a>

Пример группировки:

<a href="http://video.google.com/videoplay?docid=29023498723974239479" rel="lightvideo[group][подпись к видео]">Grouped example 1</a>
<a href="http://video.google.com/videoplay?docid=1811233136844420765" rel="lightvideo[group][подпись к видео]">Grouped example 2</a>

Пример с управлением размером:

<a href="http://video.google.com/videoplay?docid=1811233136844420765" rel="lightvideo[|width:400px;height:300px;][подпись к видео]">Google video example - custom size</a>

Поддерживаемые форматы

Поддерживается видео в форматах asx, wmv, mov и swf. Кроме этого, поддерживаются различные видеосервисы, включая YouTube и Google Video.
Источник