От автора: Очень часто на сайте необходимо отображать различные изображения, к примеру фотографии или графические материалы. При этом очень хорошей практикой является использование галерей изображений, которые упрощают просмотр как миниатюр изображений, так и их увеличенных копий. В данном уроке мы с Вами рассмотрим очень эффектную галерею изображений под названием jQuery lightGallery.
Установка галереи
Для начала переходим на официальный сайт //sachinchoolur.github.io/lightGallery/ и скачиваем архив с галереей jQuery lightGalery:
Далее распакуем полученный архив, в папке light-gallery содержатся компоненты галереи, каждый из которых расположен в отдельной папке:
css – в данной директории содержатся стили, необходимые для правильной работы галереи;
fonts – не стандартные шрифты, используемые в галерее;
img – в данном каталоге, содержится анимационное gif изображение, которое отображается при загрузке изображений;
js – в данной директории, содержится библиотека, необходимая для работы галереи.
Теперь содержимое данных каталогов, необходимо скопировать в аналогичные папки Вашего сайта. Вообще Вы можете расположить содержимое данных папок в удобных для Вас местах, главное внимательно следить за путями, подключаемых файлов.
Далее, для работы галереи необходима библиотека jQuery, поэтому если она у Вас не подключена, скачайте ее с официального сайта //jquery.com и подключите к Вашему сайту (у меня данная библиотека содержится в папке js, вместе с библиотекой галереи):
|
1 |
<script src="templates/js/jquery-1.11.2.min.js"></script> |
Далее, подключаем библиотеку галереи:
|
1 |
<script src="templates/js/lightGallery.js"></script> |
Также подключим пустой файл, script.js, в котором будем вести кодирование на языке javaScript:
|
1 |
<script src="templates/js/script.js"></script> |
Затем подключим файл стилей галереи:
|
1 |
<link rel="stylesheet" href="css/lightGallery.css"/> |
На этом установка галереи завершена.
Отображение галереи на экране браузера
Для работы галереи необходимы изображения в двух форматах:
миниатюры – изображения небольшого размера (100 пикселей по ширине и высоте), которые используются для предварительного просмотра;
изображения полного размера – необходимые для детального просмотра.
Данные изображения я уже заготовил и скопировал в папку. Так же для работы галереи необходимо создать следующую разметку HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<ul id="lightgalery" class="gallery"> <li data-src="img/1.jpg" data-sub-html="<div class='test'><h1>Hello</h1><p>Text</p></div>"> <a href="#"> <img src="img/th/1_th.jpg"> </a> </li> <li data-src="img/2.jpg"> <a href="#"> <img src="img/th/2_th.jpg"> </a> </li> <li data-src="img/3.jpg" > <a href="#"> <img src="img/th/3_th.jpg"> </a> </li> <li data-src="img/4.jpg"> <a href="#"> <img src="img/th/4_th.jpg"> </a> </li> </ul> |
Обратите внимание, что галерея представляет собой блок ul, в котором каждый тег li – это отдельное изображение галереи. Атрибут data-src – содержит путь к изображению полного размера. Соответственно тег img, каждого блока li — отображает миниатюру. Так же блок li может содержать атрибут data-sub-html, в котором можно описать произвольную строку, которая будет отображаться вместе с соответствующим изображением галереи. При этом данная строка может содержать теги HTML, таким образом можно формировать полноценные блоки и задавать для них стили. Более того, в атрибуте data-sub-html, можно указать идентификатор блока, который будет отображен с соответствующим изображением.
Так же давайте добавим несколько правил, для изображений галереи, что бы выровнять их горизонтально:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
ul { list-style: none outside none; padding-left: 0; } .gallery li { display: block; float: left; height: 100px; margin-bottom: 6px; margin-right: 6px; width: 100px; } .gallery li a { height: 100px; width: 100px; } .gallery li a img { max-width: 100px; } .test { background: none repeat scroll 0 0 #fff; left: 500px; position: absolute; top: 100px; } |
Теперь давайте посмотрим, что у нас получилось:
Теперь миниатюры изображений отображаются, но галерея в целом еще не работает. Поэтому открываем файл script.js и добавим следующий код:
|
1 2 3 4 5 6 |
jQuery(document).ready(function ($) { $("#lightgalery").lightGallery({ }); }); |
То есть при помощи библиотеки jQuery, выбираем блок в котором будет располагаться галерея – это блок с идентификатором #lightgalery, и вызываем метод lightGallery. Теперь если обновить информацию в браузере и кликнуть по одному из изображений галереи мы увидим следующее:
Как Вы видите, галерея теперь вполне работоспособна.
Настройка галереи изображений
При вызове метода lightGallery(), можно указать следующие настройки (при этом каждую настройку я закомментировал), используя которые можно настроить под себя функционал галереи:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
$("#lightgalery").lightGallery({ //вид анимационного эффекта, при смене изображения mode:'fade', // скорость протекания анимационных эффектов speed:500, // класс который будет добавлен, к основному блоку галереи addClass:'myclass', // количество загруженных изображений в память //если установлено значение 2, то следующие два и предыдущие два изображения // относительно текущего (открытого в галереи), будут загружены в память preload:2, //селектор дочерних элементов, блока с галереей. // Напомню, что каждый дочерний элемент - это отдельное изображение. //Используя данную настройку, можно создать собственную разметку слайдера selector:'p' //Если FALSE, то кнопка показа миниатюр показана не будет thumbnail:true, //Показывать или нет сразу же миниатюры изображений showThumbByDefault:true //ширина миниатюр thumbWidth:100, //внешний отступ между миниатюрами thumbMargin:50 //Если TRUE, значит перейдя к последнему изображению - мы вернемся к первому и т.д loop:true, // Если TRUE, будет включен режим автоматического проигрывания слайдшоу auto:true, //Пауза между слайдами pause:5000, //Если TRUE, выйти из просмотра изображения можно клавишей ESK eskKey:false, //Если TRUE, клик по свободной области галереи ,приведет к ее закрытию closable:false, //Если TRUE, будет отображен счетчик изображений галереи. counter:true }); |
Динамическое добавление изображений
Изображения в галерею, можно добавлять динамически, используя только код JavaScript, поэтому давайте посмотрим, как это делается. Первым делом, всю разметку галереи, я заменяю на обычный простой абзац <p>
|
1 |
<p class="but">Click</p> |
Теперь напишем небольшой скрипт – обработчик события click, по данному блоку.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
$(".but").click(function () { $(this).lightGallery({ dynamic:true, dynamicEl:[ {'src':'img/1.jpg','thumb':'img/th/1_th.jpg','sub-html':"<div class='test'><h1>Hello</h1><p>Text</p></div>"}, {'src':'img/2.jpg','thumb':'img/th/2_th.jpg'}, {'src':'img/3.jpg','thumb':'img/th/3_th.jpg'}, {'src':'img/4.jpg','thumb':'img/th/4_th.jpg'}, ] }); }); |
То есть при клике по блоку
, будет вызван метод lightGallery(), для данного блока, при этом изображения в галерею будут добавлены автоматически, исходя из значений массива, передаваемого в настройку dynamicEl. Каждая ячейка данного массива – это отдельный объект, у которого есть собственные свойства:
src- путь к полноразмерному изображению;
thumb – путь к миниатюре;
sub-html – описание изображения, это может быть кК обычный текст, так и текст содержащий html теги.
Так же, при динамическом добавлении изображений в галерею, необходимо активировать настройку dynamic, то есть передать ей значение TRUE.
На этом данный урок завершен. Всего Вам доброго и удачного кодирования!!!
Комментарии (7)