Как проще всего подключить JQuery Lightbox?

Практически на каждом сайте есть галерея изображений для увеличенного просмотра. Реализуется это при помощи JQuery-плагинов, называемых «Лайтбоксами». В этой статье я покажу самый лёгкий способ подключение лайтбокса к нужным картинкам при помощи добавления всего одного класса в атрибутах. Возникнут вопросы по этой статье - оставляйте свои комментарии, или пишите мне со страницы Контакты.

JQuery Lightbox - быстрое и простое подключение

Автор статьи: volego

2018-01-24 16:20:02

Для создания галерей изображений я перепробовал множество JQuery-плагинов, пока не нашел для себя самый идеальный лайтбокс.

Подключение у него стандартное:  

  • библиотека JQuery 
  • JS-файл с библиотекой Lightbox 
  • CSS-файл стилей
  • графические ресурсы для кнопок

Можно скачать оригинальный пример и посмотреть как там всё устроено. Моя задача -  сделать так, чтобы подключать произвольные изображения к галерее минимальными усилиями. Допустим, у нас есть несколько изображений в потоке HTML:

...
< img class="img2lightbox" src="http://site.ru/img/gallery/thumbs/img1.jpg" alt="Описание к IMG1" >
...
< img class="img2lightbox" src="http://site.ru/img/gallery/thumbs/img2.jpg" alt="Описание к IMG2" >
...

Как видим, для них я просто задаю класс img2lightbox. Стоит так же обратить внимание: каталог галереи (папка gallery) предполагает, что в ней есть подпапка thumbs, внутри которой хранятся уменьшенные эскизы изображений. Имена файлов основного изображения и его уменьшенной копии идентичны.

В общем случае, чтобы организовать механизм увеличения изображения по клику, необходимо обернуть его в ссылку, которая уже будет вести на увеличенный оригинал. Так же в атрибуты ссылки можно поместить подпись к изображению data-title и название экземпляра набора изображений data-lightbox, в рамках которого будет осуществляться навигация. Если делать всё это в потоке HTML-документа, получится много избыточного связанных элементов a + img.

Теперь самое интересное:  

Напишем немного своего JavaScript-кода. Лучше всего это сделать в отдельном JS-файле, подключаемом в конце документа:

/*JQuery уже должен быть предварительно загружен*/
/*Если есть изображения с классом img2lightbox*/
if($("img[class *= 'img2lightbox']").length>0){
   /*подгружаем JS-сценарий для Lightbox*/
   $.getScript('http://site.ru/js/lightbox.min.js');
   /*подгружаем CSS-стили для Lightbox*/
   $("head").append($(" < link rel='stylesheet' href='http://volego.ru/css/lightbox.css' type='text/css' media='screen' />"));
   /*обходим в цикле все изображения с классом img2lightbox*/
   $("img[class *= 'img2lightbox']").each( function(){
      /*берём экземпляр*/
      var el = $(this);
      /*получаем значение его SRC*/
      var str = el.attr('src');
      /*удаляем из пути нужный фрагмент, чтобы получить ссылку на основное изображение */
      str = str.replace("thumb/", "");
      /*оборачиваем экземпляр изображения в ссылку, которая и будет выдавать готовый Lightbox */
      /*в ссылку помещаем data-title=ALT изображения и указываем необходимый идентификатор набора data-lightbox*/
      el.wrap(" < a href= '" +str+"'  data-lightbox= 'images' data-title= '" +el.attr( "alt" ) + "' > < /a>");
   }); 
}

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