Обзор
LightGallery это скрипт-галерея, написанная на языке JavaScript, которая показывает изображения поверх веб страницы и способна показывать как одиночные изображения, так и галереи с использованием эффектов плавного изменения размеров и прозрачности (fade in/out). Скрипт протестирован во всех A-grade браузерах: IE 6+, Firefox 2+, Safari 3+, Opera 9.5+.
Возможности
- Масштабирование изображений
- Возможность изменять режим “во весь экран/по размеру экрана”
- Анимированные эффекты – плавное изменение размеров и прозрачности
- Возможность устанавливать опции: изменять скорость анимации, включать/выключать анимацию, устанавливать синхронное изменение размеров, включать/выключать масштабирование и др.
- Возможность добавлять языковые пакеты (в данный момент доступен только русский)
- Предварительная загрузка изображений (preload)
Примеры
Демо пример работы скрипта можно посмотреть здесь.
Установка
Чтобы установить LightGallery на веб страницу, добавьте следующий скрипт:
<script src="lightgallery/lightgallery.min.js" type="text/javascript"></script>
Заметьте: вы можете выбрать, какой скрипт подключать – несжатая версия (lightgallery.js), минифицированная (lightgallery.min.js) и сжатая (lightgallery.packed.js). lightgallery.js следует использовать только в целях разработки и отладки. Во всех других случаях используйте либо минимизированную либо сжатую версию. Если вы сжимаете скрипты при помощи GZip, то лучший вариант это минимизированная версия.
Если необходимо добавить языковой пакет, добавьте соответствующий скрипт (на этом примере показано добавление русского языкового пакета с кодировкой UTF-8):
<script src="lightgallery/lang/ru_utf8.js" type="text/javascript"></script>
Добавьте вызов функции lightgallery.init() в событие onload:
lightgallery.init();
Также можно установить различные опции:
lightgallery.init({
enableZoom:false,
speed:50,
fadeImage:false
});
Доступные опции:
- animate (по умолчанию – true) – включение/выключение анимации
- framesNumber (по умолчанию – 20) – количество кадров в анимации
- speed (по умолчанию – 30) – отрезок времени между воспроизведением кадров, мсек
- resizeSync (по умолчанию – false) – если установить в true, то размеры контейнера изменяются одновременно и по-горизонтали и по-вертикали
- enableZoom (по умолчанию – true) – включение/выключение масштабирования
- fadeImage (по умолчанию – true) – использовать плавное появление для изображений (лучше выключать для изображений большого размера)
- alias (по умолчанию – ‘lightgallery’) – псевдоним, используемый в атрибуте “rel” (rel = ‘lightgallery’).
- showOverlay (по умолчанию – true) – показывать ли оверлей
- overlayColor (по умолчанию – #000) – цвет оверлея
- overlayOpacity (по умолчанию – .85) – прозрачность оверлея
- zoomStep (по умолчанию – 0.2) – коэффициент увеличения/уменьшения размера при масштабировании
- fullSize (по умолчанию – false) – показывать ли изображения в реальном размере по умолчанию (не подгонять размер изображений под размер экрана)
- minPadding (по умолчанию – 15) – минимальное расстояние между контейнером и окном (пиксель)
Далее добавьте стиль style.css из директории skin/default (в данный момент LightGallery содержит только один скин – default):
<link href="lightgallery/skins/default/style.css" type="text/css" media="screen" rel="stylesheet" />
И последнее – необходимо отметить все изображения для просмотра используя аттрибут rel=”lightgallery”. Все изображения, которые необходимо группировать в галереи должны содержать имя галереи в квадратных скобках, т.е. так rel=”lightgallery[flowers]“. Значения аттрибута title ссылок будет отображаться как подпись к рисунку. Примеры:
Одиночные изображения
<a href="001.jpg" rel="lightgallery" title="Leaves after rain"><img src="001_t.jpg" alt=""/></a> <a href="002.jpg" rel="lightgallery" title="Pink flowers">Pink flowers</a>
Галерея
<a href="001.jpg" rel="lightgallery[flowers]" title="Leaves after rain"><img src="001_t.jpg" alt="" /></a> <a href="002.jpg" rel="lightgallery[flowers]" title="Pink flowers"><img src="002_t.jpg" alt="" /></a>
На заметку: Вы можете изменить значение атрибута “lightgallery” на что-нибудь другое используя опцию alias. Установите её в “lightbox” если необходима совместимость с LightBox:
lightgallery.init({
alias : 'lightbox'
});
Управление
Чтобы просматривать следующее/предыдущее изображение, масштабировать и т.д. используйте соответствующие ссылки или следующие команды:
“b” – предыдущее изображение, “n” – следующее изображение, “f” – показать реальный размер изображения, “+” – увеличить, “-” – уменьшить, “Esc” – выход.
Загрузить
Последняя версия 1.3 – загрузить
Посетить страницу проекта на GoogleCode
Обратная связь
Если у Вас возникнут вопросы, со мной можно связаться через email: ischenkodv@gmail.com.
