Модуль Lightbox2 используется для показа изображений поверх текущей страницы. Модуль прост в установке и работает во всех современных браузерах. Он может работать в режиме Lightbox2 Lite, при котором библиотека jQuery не используется — в таком режиме меньше вероятность того, что он будет с чем-то конфликтовать. Показ изображений поверх страницы позволяет избежать ограничений, связанных с макетом, особенно его шириной и оставить пользователя на текущей странице. Изображение будет показываться поверх страницы в том случае, если нажать мышкой на его миниатюру.
Вторая версия (Lightbox2) имеет несколько преимуществ перед первой версией (Lightbox). Отметьте: не все эти возможности будут доступны, если модуль работает в режиме Lightbox2 Lite.
Добавьте атрибут rel="lightbox" к любой ссылке и включите lightbox. Примеры:
<a href="image-1.jpg" rel="lightbox">image #1</a>
<a href="image-1.jpg" rel="lightbox[][подпись к изображению]">image #1</a>
Дополнительно: для показа подписи изображения, можно использовать либо атрибут title, либо разместите второй набор [] в атрибуте rel.
Если у вас есть набор похожих изображений и вы хотите их сгруппировать, выполните те же действия, что в параграфе «Базовое добавление», но дополнительно включите название группы в квадратные скобки в атрибуте rel. Пример:
<a href="images/image-1.jpg" rel="lightbox[путешествие]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[путешествие][подпись к изображению 2]">image#2</a>
<a href="images/image-3.jpg" rel="lightbox[путешествие][подпись к изображению 3]">image#3</a>
Ограничений на количество наборов изображений на странице или количество изображений в наборе нет.
Если у вас есть набор изображений, которые вы хотите сгруппировать, но хотите, чтобы только одно из этих изображений было видно на странице, вы можете назначить класс lightbox_hide_image, чтобы скрыть другие изображения. Пример:
<a href="images/image-1.jpg" rel="lightbox[путешествие]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[путешествие]" class="lightbox_hide_image">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[путешествие][подпись к изображению 3]" class="lightbox_hide_image">image #3</a>
Это похоже на группировку, которая описана выше. Разница только в том, что в атрибут rel нужно добавить не lightbox, а lightshow. Используя пример выше, мы заставим изображения сменять друг друга:
<a href="images/image-1.jpg" rel="lightshow[путешествие]">image #1</a>
<a href="images/image-2.jpg" rel="lightshow[путешествие][подпись к изображению 2]">image #2</a>
<a href="images/image-3.jpg" rel="lightshow[путешествие][подпись к изображению 3]">image #3</a>
В 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.
Возможно показывать содержание страниц в lightbox, используя iframe. В этом случае, в артибут rel следует записать lightframe. Возможна группировка пунктов (например lightframe[поиск]
), а также управление дополнительными параметрами iframe. Можно установить свойства width, height и scrolling. Свойства отделяются от названия группы вертикальной чертой «|», например lightframe[поиск|width:100px;]
и lightframe[поиск|width:120px][подпись]
. Если группировка не используется, то вертикальная черта всё равно должна присутствовать — lightframe[|width:100px;]. Свойства должны записываться в формате property: value; (обратите внимание на закрывающее двоеточие). Если свойства iframe не установлены, то применяются стандартные значения — 400px по ширине и по высоте. Посмотрите примеры ниже.
Базовый пример:
<a href="http://www.google.com" rel="lightframe[][Search Google]">Search google</a>
Пример группировки:
<a href="http://www.google.com" rel="lightframe[search]">Search google</a>
<a href="http://www.yahoo.com" rel="lightframe[search][Search Yahoo]">Search yahoo</a>
Пример с управлением размером:
<a href="http://www.google.com" rel="lightframe[|width:400px; height:300px; scrolling: auto;]">Search google</a>
Пример группировки с управлением размером:
<a href="http://www.google.com" rel="lightframe[search|width:400px; height:300px; scrolling: auto;]">Search google</a>
<a href="http://www.yahoo.com" rel="lightframe[search|width:400px; height:300px;][Search Yahoo]">Search yahoo</a>
Возможно показывать HTML-сниппеты в lightbox, которые находятся на домене сайта. В этом случае атрибут rel должен иметь запись lightmodal. Опять же, можно группировать содержание (например lightmodal[search]
), но в дополнение к этому, возможно управлять свойствами inline/modal. Можно установить свойства width, height и scrolling для встроенного содержания. Свойства отделяются от группы вертикальной чертой «|», например lightmodal[search|width:100px;]
и lightmodal[search|width:100px;][подпись]
. Если группировка не используется, то вертикальная черта всё равно должна присутствовать — lightmodal[|width:100px;]. Свойства должны записываться в формате property: value; (обратите внимание на закрывающее двоеточие). Если свойства не установлены, то применяются стандартные значения — 400px по ширине и по высоте. Посмотрите примеры ниже.
Базовый пример:
<a href="search.php" rel="lightmodal">Search</a>
Базовый пример с подписью:
<a href="search.php" rel="lightmodal[][my caption]">Search</a>
Пример группировки:
<a href="search.php" rel="lightmodal[search]">Search</a>
<a href="search.php?status=1" rel="lightmodal[search][published]">Search published content</a>
Пример с управлением размером:
<a href="search.php" rel="lightmodal[|width:400px; height:300px; scrolling: auto;]">Search</a>
Пример группировки с управлением размером:
<a href="search.php" rel="lightmodal[search|width:400px; height:300px; scrolling: auto;]">Search</a>
<a href="search.php?status=1" rel="lightmodal[search|width:400px; height:300px;][Search published]">Search published content</a>
<a href="search.php?status=0" rel="lightmodal[search|width:400px; height:300px;][Search Unpublished]">Search unpublished content</a>
Клавиатурные сочетания можно установить на странице настройки модуля. Стандартно, используются следующие сочетания:
Не все сочетания работают в браузере Опера, например z для масштабирования и пробел для остановки/запуска слайдшоу. Это можно изменить в параметрах браузера.
2017.08.24 | Lightbox2 - View Image Details |
Комментарии
При пользовании в связке с IMCE есть интересное решение - галереи.