jQuery lightGallery — эффектная галерея для сайта

jQuery lightGallery - эффектная галерея для сайта

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

скачать исходникискачать урок

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

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

Современные технологии веб-разработки

AngularJS, Webpack, NodeJS, ReactJS, TypeScript, Gulp, Git, Github...
Узнайте все о современных технологиях в веб-разработке

Узнать подробнее

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

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

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

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

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

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

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

<script src="templates/js/jquery-1.11.2.min.js"></script>

Далее, подключаем библиотеку галереи:

<script src="templates/js/lightGallery.js"></script>

Также подключим пустой файл, script.js, в котором будем вести кодирование на языке javaScript:

<script src="templates/js/script.js"></script>

Затем подключим файл стилей галереи:

<link  rel="stylesheet" href="css/lightGallery.css"/>

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

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

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

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

Современные технологии веб-разработки

AngularJS, Webpack, NodeJS, ReactJS, TypeScript, Gulp, Git, Github...
Узнайте все о современных технологиях в веб-разработке

Узнать подробнее

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

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

<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, можно указать идентификатор блока, который будет отображен с соответствующим изображением.
Так же давайте добавим несколько правил, для изображений галереи, что бы выровнять их горизонтально:

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 и добавим следующий код:

jQuery(document).ready(function ($) {
 
 $("#lightgalery").lightGallery({
 });

});

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

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

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

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

$("#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>

<p class="but">Click</p>

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

$(".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.

На этом данный урок завершен. Всего Вам доброго и удачного кодирования!!!

Современные технологии веб-разработки

AngularJS, Webpack, NodeJS, ReactJS, TypeScript, Gulp, Git, Github...
Узнайте все о современных технологиях в веб-разработке

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Хотите научиться делать фотогалереи как Вконтакте?

Прямо сейчас изучите курс по созданию красивой фотогалареи как Вконтакте!

Смотреть курс

Метки: ,

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (7)

  1. Iryna

    Виктор, благодарю за знакомство с данным плагином. Забираю себе на сайт.
    Хороший урок, спасибо.

  2. Ольга

    добрый день, подскажите а lightSlider по такому же принципу установка? или есть какие-то особенности?

    • Андрей Кудлай

      Добрый день, Ольга. Принцип работы со всеми подобными плагинами — один и тот же. Есть, конечно, нюансы, но суть одинакова. Ну и порядок установки всегда можно найти на официальном сайте плагина.

  3. Ольга

    что-то совсем я запуталась, не получается слайдер поставить,
    подскажите может у вас есть урок по установке lightslider
    http://sachinchoolur.github.io/lightslider/ я вот здесь смотрела,
    с галереей разобралась по вашему уроку,) поставила, но слайдер мне актуальнее, но вот с ним не получается разобраться

    • Андрей Кудлай

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

  4. Вал

    Приветствую! Подскажите, как настроить две и более динамически подгружаемых галереи на одной странице. Пробовал использовать разные galleryId. Первая галерея открывается нормально, но что бы открыть вторую нужен двойной клик. При одиночном галерея открывается и сразу закрывается. Плагин hash подключен.

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree