Галерея лайтбоксом

Нужна на сайте галерея лайтбоксом? 58 строк кода – и все готово! Для одного из проектов мне понадобилось сделать простой лайтбокс для галереи картинок и видео. Это такая возможность, реализованная на jQuery, для красивого затенения всего содержимого страницы при клике на картинке (изображении). Причем когда лайтбокс запущен, есть возможностью листать все изображения галереи или выйти в обычный режим отображения. Но обо всем по порядку.

Содержание:

 

Основные требования к галерее лайтбоксом

В моем случае необходимыми условиями являлись:

  • Возможность работы лайтбокса как для изображений, так и для видео.
  • Отображение лайтбокосом количества элементов в галерее.
  • Возможность перелистывания изображений мышкой или клавиатурой.
  • Простота закрытия лайтбокса в любой момент и предсказуемость его работы.

Все это нашлось в неплохом скрипте, найденном на просторах интернета.

 

Код простого лайтбокса галереи

Весь код вывода картинок лайтбоксом можно разделить на три логические части:

  • Сначала подключаем необходимые файлы в теге head html документа
  • Выполняем верстку галереи, необходимую для работы скрипта лайтбокса
  • Вызываем в скрипте функцию лайтбокса с необходимыми параметрами.

Исходники с примером работы скрипта можно скачать в этом архиве.

 

Вывод

Если вам нужна галерея лайтбоксом на своей сайте, для этого понадобится всего 58 строк кода и немного терпения. В интернете есть масса других способов сделать это. Среди всех них наиболее простым мне показался именно этот. Так что скачивайте исходник и пользуйтесь.

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

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

*

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