Lightgallery всплывайка / галерея картинок для сайта

Скрипты на jQuery, которые позволяют без перезагрузки страницы увеличивать картинки, обычно называют всплывайками. Они бывают очень разными по функционалу – одни увеличивают картинки в виде лупы, другие с затемнение экрана. Именно такой вариант мы и рассмотрим.

Для создания увеличилок картинок или даже галерей рекомендую использовать lightgallery. Он состоит из файла стилей, скрипта lightgallery.js и служебных картинок. Позволяет увеличивать картинки с подписями (для этого используется title). Если же вам требуется галерея, то при нажатии на одну из ее картинок, она увеличится, затем появятся стрелки для прокрутки к другим связанным картинкам.

Скачав выше исходники галереи, вы увидите в коде следующую запись: <script type="text/javascript">lightgallery.init();</script> - эта строка запускает работу всего скрипта.

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

Чтобы подключить скрипт увеличилки на любую картинку, вам нужно обрамить ее ссылкой вот так:
<a href="images/001.jpg" rel="lightgallery" title="Подпись при увеличении"><img src="images/001_t.jpg" /></a>

Здесь, ссылка, которая находится в href ссылается на оригинал картинки большого размера, а сама картинка, которая находится в теге img будет ее миниатюрой. Если вы будете использовать такой подход, то сэкономите скорость загрузки сайта, так как большие, тяжеловестные картинки будут подгружаться только если пользователь кликнет на миниатюре. Но ничего вам не запрещает в ссылку a и картику img вставить одно и то же изображение. Чтобы галерея поняла, на какой ссылке запускать всплывайку в ссылке используется атрибут rel="lightgallery".

Как создать галерею через lightgallery

Принцип использования lightgallery.js заключается в добавлении специального атрибута к тем картинкам, которые должны быть одной галереей. Например:
<a href="images/001.jpg" rel="lightgallery[flowers]" ><img src="images/001_t.jpg" /></a>
<a href="images/002.jpg" rel="lightgallery[flowers]" ><img src="images/002_t.jpg" /></a>

Здесь вы видите, что к обеим картинкам добавился атрибут lightgallery[flowers] - он означает, что картинки связаны и являются одной и той же галереей. Теперь если мы увеличим одну картинку, то появятся стрелки для просмотра других изображений в этом же окне.

По такому принципу очень легко на сайте организовать эффекты всплывающих картинок и галерей.