Сегодня наш разговор пойдет о том, как установить красивый модуль 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.
Источник