Вы здесь

Lightbox2

Оформление просмотра изображений.

Модуль 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 для масштабирования и пробел для остановки/запуска слайдшоу. Это можно изменить в параметрах браузера.

Обсуждение
Видео работы с проектом

Комментарии

Изображение пользователя givchik

При пользовании в связке с IMCE есть интересное решение - галереи.