jQuery Галерея

Установка галереи

Для начала переходим на официальный сайт //sachinchoolur.github.io/lightGallery/ и скачиваем архив с галереей jQuery lightGalery:

Далее распакуем полученный архив, в папке light-gallery содержатся компоненты галереи, каждый из которых расположен в отдельной папке:

css – в данной директории содержатся стили, необходимые для правильной работы галереи;

fonts – не стандартные шрифты, используемые в галерее;

img – в данном каталоге, содержится анимационное gif изображение, которое отображается при загрузке изображений;

js – в данной директории, содержится библиотека, необходимая для работы галереи.

Теперь содержимое данных каталогов, необходимо скопировать в аналогичные папки Вашего сайта. Вообще Вы можете расположить содержимое данных папок в удобных для Вас местах, главное внимательно следить за путями, подключаемых файлов.

Далее, для работы галереи необходима библиотека jQuery, поэтому если она у Вас не подключена, скачайте ее с официального сайта //jquery.com и подключите к Вашему сайту (у меня данная библиотека содержится в папке js, вместе с библиотекой галереи):

На этом установка галереи завершена.

Отображение галереи на экране браузера

Для работы галереи необходимы изображения в двух форматах:

миниатюры – изображения небольшого размера (100 пикселей по ширине и высоте), которые используются для предварительного просмотра;

изображения полного размера – необходимые для детального просмотра.

Данные изображения я уже заготовил и скопировал в папку. Так же для работы галереи необходимо создать следующую разметку HTML:

Обратите внимание, что галерея представляет собой блок ul, в котором каждый тег li – это отдельное изображение галереи. Атрибут data-src – содержит путь к изображению полного размера. Соответственно тег img, каждого блока li — отображает миниатюру. Так же блок li может содержать атрибут data-sub-html, в котором можно описать произвольную строку, которая будет отображаться вместе с соответствующим изображением галереи. При этом данная строка может содержать теги HTML, таким образом можно формировать полноценные блоки и задавать для них стили. Более того, в атрибуте data-sub-html, можно указать идентификатор блока, который будет отображен с соответствующим изображением.
Так же давайте добавим несколько правил, для изображений галереи, что бы выровнять их горизонтально:

Теперь давайте посмотрим, что у нас получилось:

Теперь миниатюры изображений отображаются, но галерея в целом еще не работает. Поэтому открываем файл script.js и добавим следующий код:

То есть при помощи библиотеки jQuery, выбираем блок в котором будет располагаться галерея – это блок с идентификатором #lightgalery, и вызываем метод lightGallery. Теперь если обновить информацию в браузере и кликнуть по одному из изображений галереи мы увидим следующее:

Как Вы видите, галерея теперь вполне работоспособна.

Настройка галереи изображений

При вызове метода lightGallery(), можно указать следующие настройки (при этом каждую настройку я закомментировал), используя которые можно настроить под себя функционал галереи:

Динамическое добавление изображений

Изображения в галерею, можно добавлять динамически, используя только код JavaScript, поэтому давайте посмотрим, как это делается. Первым делом, всю разметку галереи, я заменяю на обычный простой абзац <p>

Теперь напишем небольшой скрипт – обработчик события click, по данному блоку.

То есть при клике по блоку , будет вызван метод lightGallery(), для данного блока, при этом изображения в галерею будут добавлены автоматически, исходя из значений массива, передаваемого в настройку dynamicEl. Каждая ячейка данного массива – это отдельный объект, у которого есть собственные свойства:

src- путь к полноразмерному изображению;

thumb – путь к миниатюре;

sub-html – описание изображения, это может быть кК обычный текст, так и текст содержащий html теги.

Так же, при динамическом добавлении изображений в галерею, необходимо активировать настройку dynamic, то есть передать ей значение TRUE.