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

By | 06.12.2012

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

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

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

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

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

Предыдущая версия библиотеки LightBox реализована без применения сторонних библиотек. В ней нет анимации и нет возможности просмотра нескольких связанных изображений. В то же время она легче и не притязательнее.

Видео

В 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.

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Лимит времени истёк. Пожалуйста, перезагрузите CAPTCHA.