Simple Lightbox — Довольно симпатичный lightbox плагин, да еще и адаптивный. Поддерживает touch события на мобильных устройствах и эмитирует их на десктопе.

Большинство lightbox плагинов слишком навороченные, для каких-то простых задач они не всегда подходят, по заверениям автора плагина здесь присутствует самые необходимые настройки и ничего лишнего, весит это чудо не больше 6kb и работает с jQuery версий 1.* и 2.*.

Возможности

  • Адаптивный
  • Поддержка touch событий(swipe движения влево в право)
  • Очень прост в использовании
  • Минималистический дизайн, можно создать все что угодно
  • Предзагрузка изображений перед показом
  • Поддержка мобильных ОС(Android, iOS, Windows phone)
  • CSS3 анимация
  • Поддержка управления с клавиатуры

Использование

В первую очередь подключаем css и js файлы скрипта и инициализируем плагин следующим кодом:

1
var lightbox = $('.gallery a').simpleLightbox(options);

Настройки

ПараметрПо умолчаниюОписание параметра
overlaytrueВключает или отключает оверлей за всплывающей фотографией
spinnertrueВключает или отключает показ анимации загрузки изображения, лучше не отключать чтобы пользователи видели что картинка прогружается
navtrueВключает или отключает навигационные стрелки(предыдущие, следующее)
navText[‘←’,’→’]Позволяет указать любой текст или html вместо стандартных стрелок стрелок
captionstrueВключает или отключает отображение описания картинки
captionSelectorimgМожно указать селектор, указывается откуда брать описание к картинке
captionTypeattrУказывается тип описания attr говорит о том что описание будет браться из атрибута элемента captionSelector. data говорит о том что описание будет взята из data атрибута того же элемента и text говорит о том что будет взят все содержимое указанного элемента jQuery функцией html()
captionsDatatitleВ какой атрибуте искать описание
closetrueВключает или отключает отображение кнопки закрытия
closeTextХТекст кнопки закрытия, можно использовать html код
showCountertrueВключает или отключает отображение количества изображений в левом верхнем углу по умолчанию
fileExtpng|jpg|jpeg|gifСписок разрешенных расширений изображений с которыми можно работать, можно указывать регулярные выражения
animationSpeed250Скорость анимации при смене слайдов в миллисекундах
preloadingtrueПредзагрузка следующего и предыдущего изображения
enableKeyboardtrueВключение управления с клавиатуры
docClosetrueЕсли нажать за пределами lightbox’a то lightbox закроется
swipeTolerance50Настройка для touch событий, на сколько пикселей нужно сдвинуть слайд чтобы сработал переход на новый слайд
classNamesimple-lightboxCSS класс lightbox’a
widthRatio0.8Позволяет настроить ширину показываемого изображения
heightRatio0.8Позволяет настроить высоту показываемого изображения
disableRightClickfalseОтключает использования правой кнопки мыши на открытом изображении
disableScrolltrueБлокирует скрол при открытом изображении

События

СобытиеОписание параметра
open.simplelightboxСобытие срабатывает перед открытием lightbox
opened.simplelightboxСобытие срабатывает после открытия lightbox
close.simplelightboxСобытие срабатывает перед закрытием lightbox
closed.simplelightboxСобытие срабатывает после закрытия lightbox

Пример:

1
2
3
$('.gallery a').on('open.simplelightbox', function () {
  // код....
});

Методы

МетодОписание параметра
openОткрывает lightbox
closeЗакрывает lightbox
nextПереключает слайд на следующий
prevПереключает слайд на предыдущий
destroyУдаляет инициализированный элемент lightbox

Пример:

1
2
3
var gallery = $('.gallery a').simpleLightbox();

gallery.next();

Возможно вас это заинтересует
comments powered by HyperComments