Модуль Lightbox2
используется для показа изображений поверх текущей страницы. Модуль
прост в установке и работает во всех современных браузерах. Он может
работать в режиме Lightbox2 Lite, при котором библиотека jQuery не
используется — в таком режиме меньше вероятность того, что он будет с
чем-то конфликтовать. Показ изображений поверх страницы позволяет
избежать ограничений, связанных с макетом, особенно его шириной и
оставить пользователя на текущей странице. Изображение будет
показываться поверх страницы в том случае, если нажать мышкой на его
миниатюру.
Вторая версия (Lightbox2) имеет несколько преимуществ перед первой
версией (Lightbox). Отметьте: не все эти возможности будут доступны,
если модуль работает в режиме Lightbox2 Lite.
- Наборы изображений: группировка похожих изображений и удобная навигация по ним
- Смена изображений: автоматическая смена изображений группы, включая возможность запуска/остановки слайдшоу и кнопок перехода к предыдущему и следующему изображениям
- Поддержка содержания: использование фильтров и возможность показа HTML-содержания в lightbox.
- Поддержка видео: возможность показа видео в lightbox
- Визуальные эффекты: красивая предзагрузка и открытие изображнения
- Клавиатурные сочетания: удобное использование клавиатурных сочетаний для переключения между изображениями, запуском/остановкой слайдшоу и т.д.
- Возможность масштабирования: большие изображения будут уменьшены до размеров, которые позволяют им поместиться в окне браузера. В этом случае будет доступна кнопка, которая позволяет увидеть изображение в оригинальном размере
- Автоматическое определение изображений: автоматическое переформатирование миниатюр, которое позволяет не добавлять запись rel="lightbox" к каждой ссылке на изображение. Эта возможность совместима с модулями Image, Inline, Flickr, Image Assist и ImageField. Также возможно использование своих CSS-классов, которые будут приводить к показу изображения с помощью модуля Lightbox2
- Поддержка ImageCache: добавление форматтера поля Lightbox2 для ImageFields и использовании его в видах
- Ссылка на страницу изображения: ссылка на страницу изображения может быть доступна из слоя lightbox
- Возможность исключения страниц: исключение определённых страниц из области действия эффектов Lightbox2
- Поддержка формы входа в аккаунт: возможность изменять все ссылки и вывод формы входа в аккаунт в накладываемом слое
- Настройка оформления и анимации: настройка порядка и скорости анимации, включая настройку цветов, размеров границ и тонирования накладываемого слоя
- Поддержка Gallery 2: поддержка изображений Gallery 2 через модуль Gallery
Использование
Базовое добавление
Добавьте атрибут 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>Клавиатурные сочетания
Клавиатурные сочетания можно установить на странице настройки модуля. Стандартно, используются следующие сочетания:
- Закрыть — x, o, c или Esc
- Предыдущее изображение — p или стрелка влево
- Следующее изображение — n или стрелка вправо
- Масштабирование — z (в режиме слайдшоу недоступно)
- Запуск/остановка — пробел (доступно в режиме слайдшоу)
Не все сочетания работают в браузере Опера, например z для
масштабирования и пробел для остановки/запуска слайдшоу. Это можно
изменить в параметрах браузера.
Материал взят с сайта: http://content-management-systems.info/drupal/project/lightbox2
Комментариев нет:
Отправить комментарий