Обзор
LightGallery это скрипт для просмотра изображений, написанный на JavaScript (подобен популярному скрипту LightBox). Он способен отображать как одиночные изображения, так и галереи с использованием визуальных эффектов. Скрипт очень компактен (7K - сжатая версия) и полнофункциональный, и при этом он независит от других библиотек.
Возможности
- Масштабирование изображений
- Возможность изменять режим “во весь экран/по размеру экрана”
- Анимированные эффекты - плавное изменение размеров и прозрачности
- Возможность устанавливать опции: изменять скорость анимации, включать/выключать анимацию, устанавливать синхронное изменение размеров, включать/выключать масштабирование и др.
- Возможность добавлять языковые пакеты (в данный момент доступен только русский)
- Предварительная загрузка изображений (preload)
Примеры
Одиночные изображения:
Галерея:
Управление
Чтобы просматривать следующее/предыдущее изображение, масштабировать и т.д. используйте соответствующие ссылки или следующие команды:
“b” - предыдущее изображение, “n” - следующее изображение, “f” - показать реальный размер изображения, “+” - увеличить, “-” - уменьшить, “Esc” - выход.
Установка
Чтобы установить 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:
window.onload = function(){
lightgallery.init();
}
Также можно установить различные опции:
window.onload = function(){
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’).
Далее добавьте стиль 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:
window.onload = function(){
lightgallery.init({
alias : 'lightbox'
});
}
Загрузить
Последняя версия 1.1 - загрузить
Посетить страницу проекта на GoogleCode
Обратная связь
Если у Вас возникнут вопросы, со мной можно связаться через email: ischenkodv@gmail.com