Скорей всего, вы слышали или уже использовали такую галерею, как Fancybox, и, соответственно, знаете, что подключать ее нужно вместе с jQuery. Но некогда популярная jQuery сейчас довольно часто уходит в тень перед развернувшим крылья нативным JavaScript-ом и CSS-анимациями. Это также касается и jQuery-плагинов, которые позволяют делать многое вещи, в том числе и фото- и видео-галереи.
Если вы задумались о том, чтобы заменить Fancybox на плагин, использующий чистый JavaScript, например, с целью оптимизации загрузки ваших страниц, то в этой статье вашему вниманию предлагается плагин lightgallery от Sachin N. Вы можете узнать об этой галерее на GitHub или посмотреть демо на официальном сайте lightgallery.
Преимущества фотогалереи (согласно документации):
- Полностью отзывчивый плагин.
- Модульная архитектура со встроенными плагинами.
- Touch-события и поддержка мобильных устройств.
- Поддержка перетаскивания мышью для настольных компьютеров.
- Двойной клик/ двойное касание для того, чтобы увидеть фактический размер изображения.
- Анимированные миниатюры (эскизы).
- Возможность обмена фотографиями в социальных сетях.
- Поддержка видео Youtube, Vimeo, Dailymotion, VK и HTML5.
- 20+ переходов CSS3 с аппаратным ускорением.
- Динамический режим.
- Полноэкранная поддержка.
- Поддержка масштабирования.
- API истории браузера.
- Адаптивные изображения.
- Поддержка HTML iframe.
- Несколько экземпляров на одной странице.
- Легко настраивается с помощью CSS (SCSS) и настроек.
- Умная предварительная загрузка изображений и оптимизация кода.
- Клавиатурная навигация для рабочего стола.
- Поддержка значков шрифтов.
- Поддержка специальных возможностей.
- Поворот изображения (с дополнительным плагином).
Подключаем плагин lightgallery
Подключение плагина lightgallery состоит из двух этапов:
- Подключение css-файла в <head> документа
123<head><link rel="stylesheet" href="css/lightgallery.css"></head> - Подключение js-файла перед закрывающимся </body>:
123456789<body>...<script src="js/lightgallery.min.js"></script><!-- lightgallery plugins --><script src="js/lg-thumbnail.min.js"></script><script src="js/lg-fullscreen.min.js"></script></body>
Здесь вы можете дополнительно подключть плагины, которые позволят вам отобразить миниатюры изображений и сделать доступным полноэкранный просмотр фото.
В обоих случаях вместо css- и/или js-файла вы можете подключить минифицированную версию плагина. Кроме того, можно найти js-файл на CDN по ссылке https://www.jsdelivr.com/projects/lightgallery.js.
Lightgallery также поддерживает модули AMD, CommonJS и ES6. При использовании AMD убедитесь, что lightgallery.js загружается до модулей lightgallery.
1 2 3 4 5 | require(['./lightgallery.js'], function() { require(["./lg-zoom.js", "./lg-thumbnail.js"], function(){ lightGallery(document.getElementById('lightgallery')); }); }); |
HTML-разметка для lightgallery
В документации к lightgallery написано, что этот плагин не заставляет вас использовать какую-либо конкретную разметку, т.е. вы можете использовать любую разметку, какую захотите. Однако предлагается вариант разметку, в которой будет один div-обертка, внутри которого размещены ссылки на изображения с самими изображениями, а именно:
1 2 3 4 5 6 7 8 9 | <div id="lightgallery"> <a href="img/img1.jpg" title="Image 1"> <img src="img/thumb1.jpg"> </a> <a href="img/img2.jpg" title="Image 2"> <img src="img/thumb2.jpg"> </a> ... </div> |
Вызов плагина
Теперь вам осталось добавить собственный код после того, как вы подключили скрипт плагина. Если для div-обертки для галереи вы задали атрибут id
, как в разметке, то вам останется добавить совсем небольшой код:
1 2 3 | <script> lightGallery(document.getElementById('lightgallery')); </script> |
Если вы не хотите назначать id для элемента-обертки, задайте ему класс или data-атрибут, а затем используйте метод document.querySelector()
:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <div class="gallery" data-gallery="gallery1"> <a href="img/img1.jpg"> <img src="img/thumb1.jpg"> </a> <a href="img/img2.jpg"> <img src="img/thumb2.jpg"> </a> ... </div> <script src="js/lightgallery.min.js"></script> <script> //при использовании атрибута class lightGallery(document.getElementById('.gallery')); //при использовании атрибута data-атрибута lightGallery(document.getElementById('[data-gallery]')); </script> |
Учтите, что метод document.querySelector()
возвращает вам первый элемент, найденный на странице или в другом html-элементе, поэтому его нельзя использовать для нескольких галерей.
В том случае, если у вас все же есть несколько галерей на одной странице, вы не можете дать им один id
, т.к. это противоречит HTML-спецификации, да и метод document.querySelector()
не подойдет, т.к. имеет смысл все галереи объединить одним классом, на выручку придут методы document.querySelectorAll('.className')
или document.getElementsByClassName('className')
, например так:
1 2 | let allGalleries = document.querySelectorAll('.gallery'); allGalleries.forEach(item => lightGallery(item)) |
Давайте прямо сейчас посмотрим, что умеет Lightgallery "из коробки" (открыть пример в новой вкладке): показывать и листать изображения, уменьшать их под размер экрана, выводить описания на основе атрибутов title
для ссылок, предоставлять ссылку на скачивание изображения, показывать счетчик изображений в виде "номер текущего фото/всего фотографий".
Это далеко не все "умения" Lightgallery. Просто остальные его возможности, как правило, зависят от дополнительных js- или css-файлов, которые разработчики разделили по функциональности.
Использование настроек плагина
Плагин организован таким образом, чтобы предоставить вам основной функционал в минифицированном файле весом всего 25кб. Вы можете при вызове плагина использовать ряд настроек, которые перечислены в документации, следующим образом:
1 2 3 4 | lightGallery(document.getElementsByClassName('gallery-test')[0], { download: false, speed: 1000 }); |
То есть после указания ссылки на элемент вы добавляете объект, который использует установленные для плагина свойста и варианты их значений. Придется немного попрактиковаться в английском.
Некоторые настройки, которые было бы очень интересно сделать, возможны только при подключении дополнительных плагинов. Кстати, найти все плагины можно в папке demo/js на GitHub плагина:
Рассмотрим некоторые плагины подробнее.
Анимированные миниатюры
Анимированные миниатюры - это уменьшенные изображения в нижней части галереи, которые являются кликабельными и показывают пользователю, как выглядит картинка.
Для того чтобы миниатюры у вас появились, вам необходимо добавить еще один плагин после основного скрипта lightgallery.min.js:
1 2 | <script src="js/lightgallery.min.js"></script> <script src="js/lg-thumbnail.min.js"></script> |
Затем при вызове основной функции плагина, вы записываете в фигурных скобках опцию thumbnail:true
1 2 3 | lightGallery(document.getElementById('animated-thumbnials'), { thumbnail:true }); |
Теперь вы можете посмотреть, что получилось с миниатюрами (открыть в новой вкладке).
Изменение html-разметки и использование селекторов:
1 2 3 4 5 6 7 8 9 10 | <div id="some-selector"> <h2>Gallery title</h3> <div class="item" data-src="img/img1.jpg"> <img src="img/thumb1.jpg" /> </div> <div class="item" data-src="img/img2.jpg"> <img src="img/thumb2.jpg" /> </div> ... </div> |
В скрипте необходимо записать такой вызов плагина:
1 2 3 | lightGallery(document.getElementById('some-selector'), { selector: '.item' }); |
В том случае, если вы хотите запускать фотогалерею по клику на текстовой ссылке, разметка и скрипт меняются так:
1 2 3 4 5 6 7 8 9 | <a id="see-photo" href="img/img1.jpg"> Открыть фото </a> .... <script> lightGallery(document.getElementById('see-photo'), { selector: 'this' }); </script> |
CSS-переходы для анимации смены изображений
Вы можете добавить в <head>
еще один css-файл lg-transitions.min.css
, который есть в архиве у разработчиков и получить возможность выбирать, каким образом картинки в галерее будут сменять друг друга. Набор эффектов перехода довольно приличный, и вы можете попробовать применить их сами в примере ниже (открыть в новой вкладке).
Для того чтобы смена эффектов была возможна, использовался такой скрипт:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | const galleryThumbs = document.querySelector('.galery-thumbs'); function customTransitions(trans) { lightGallery(galleryThumbs, { thumbnail: true, mode: trans }); } customTransitions('lg-slide'); document.getElementById('select-trans').onchange = function() { window.lgData[galleryThumbs.getAttribute('lg-uid')].destroy(true); customTransitions(this.value); } |
Вам же для того, чтобы использовать какой-то один эффект, отличный от 'lg-slide', который установлен по умолчанию, можно выбрать любой из перечисленных на сайте разработчика: 'lg-slide'
'lg-fade'
'lg-zoom-in'
'lg-zoom-in-big'
'lg-zoom-out'
'lg-zoom-out-big'
'lg-zoom-out-in'
'lg-zoom-in-out'
'lg-soft-zoom'
'lg-scale-up'
'lg-slide-circular'
'lg-slide-circular-vertical'
'lg-slide-vertical'
'lg-slide-vertical-growth'
'lg-slide-skew-only'
'lg-slide-skew-only-rev'
'lg-slide-skew-only-y'
'lg-slide-skew-only-y-rev'
'lg-slide-skew'
'lg-slide-skew-rev'
'lg-slide-skew-cross'
'lg-slide-skew-cross-rev'
'lg-slide-skew-ver'
'lg-slide-skew-ver-rev'
'lg-slide-skew-ver-cross'
'lg-slide-skew-ver-cross-rev'
'lg-lollipop'
'lg-lollipop-rev'
'lg-rotate'
'lg-rotate-rev'
'lg-tube'
.
В результате ваш код будет примерно таким:
1 | lightGallery(document.getElementById('my-gallery'), { mode: 'lg-zoom-in-big'}); |
Полноэкранный режим и увеличение/уменьшение фото
Для того, чтобы вы могли просматривать фото в полноэкранном режиме, необходимо подключить дополнительный плагин и ...все. Никаких настроек дописывать не надо. При просмотре изображения справа вверху вы просто увидите кнопку для перехода в полноэкранный режим. То же самое касается и плагина зума - увеличения/уменьшения картинок с помощью дополнительных кнопок вверху справа.
1 2 3 | <script src="js/lightgallery.min.js"></script> <!-- основной скрипт плагина --> <script src="js/lg-fullscreen.min.js"></script> <!-- для полноэкранного режима --> <script src="js/lg-zoom.min.js"></script> <!-- для увеличения/уменьшения картинок --> |
Выглядят кнопки примерно так:
Воспроизведение видео
Плагин Lightgallery позволяет воспроизводить видео с популярных видео-ресурсов, таких, как YouTube, Vimeo, VK, а также различные типы видеоформатов, доступные в HTML5: MP4, WebM, Ogg и т. д.
Чтобы отобразить видео YouTube, Vimeo или VK, вы можете вставить URL-адрес видео или поделиться URL-адресом, который предоставляется YouTube / vimeo в атрибуте data-src. Разметка в остальном такая же, как и для галереи изображений. Lightgallery проверит атрибут data-src и, если это URL-адрес видео YouTube или Vimeo, создаст видео-слайд.
Вы даже можете предоставить изображение постера для каждого видео. Вместо видео будут загружены изображения постеров. Пользователь сможет переходить к другим слайдам с помощью перетаскивания мышью или смахивания. Постеры повышают производительность и сохраняют гибкость вашей галереи, не влияя на взаимодействие с пользователем. Видео будут загружаться, когда пользователь нажимает на изображение-постер. Вы можете поместить URL-адрес изображения постера в атрибут data-poster.
Кроме того, Lightgallery позволяет автоматически загружать миниатюры изображений с YouTube, Vimeo или VK. Вы можете указать размер миниатюр в настройках. Видео будет автоматически приостановлено, когда пользователь начнет переходить к другому слайду.
Пример разметки видео с YouTube и Vimeo с постером
1 2 3 4 5 6 7 8 9 | <div id="video-gallery"> <a href="https://www.youtube.com/watch?v=meBbDqAXago" data-poster="video-poster1.jpg" > <img src="img/thumb1.jpg" /> </a> <a href="https://vimeo.com/1084537" data-poster="video-poster2.jpg"> <img src="img/thumb2.jpg" /> </a> ... </div> |
Внимание! Для корректного воспроизведения видео Lightgallery требует, чтобы в ваш документ был включен плагин для видео, доступный на GitHub.
1 2 3 4 5 | <script src="js/lightgallery.min.js"></script> <script src="js/lg-video.js"></script> <script> lightGallery(document.getElementById('video-gallery')); </script> |
Настройки для видео
При добавлении Lightgallery для видео вы можете указать такие настройки:
1 2 3 4 5 6 7 8 9 10 11 12 13 | lightGallery(document.getElementById('video-player-param'), { youtubePlayerParams: { modestbranding: 1, showinfo: 0, rel: 0, controls: 0 }, vimeoPlayerParams: { byline : 0, portrait : 0, color : 'A90707' } }); |
Для того чтобы в галерее отображались миниатюры для видео-файлов, необходимо подключить еще один плагин, а затем при вызове основной функции плагина, указать такие настройки:
1 2 3 4 5 6 | lightGallery(document.getElementById('video-thumbnails'), { loadYoutubeThumbnail: true, youtubeThumbSize: 'default', loadVimeoThumbnail: true, vimeoThumbSize: 'thumbnail_medium', }); |
Всю документацию по плагину вы найдете на англоязычном сайте.
Лицензия для использования плагина lightgallery.js
Лицензия с открытым исходным кодом
Если вы создаете приложение с открытым исходным кодом по лицензии, совместимой с лицензией GNU GPL v3, вы можете использовать этот проект в соответствии с условиями GPLv3. Это значит, что вы пользуетесь плагином бесплатно.
Коммерческая лицензия
Если вы хотите использовать lightgallery.js для разработки коммерческих сайтов, тем, проектов и приложений, вам подойдет коммерческая лицензия. При использовании этой опции ваш исходный код остается закрытым. Узнать больше о коммерческой лицензии вы можете по ссылке.
Несколько слов о jQuery lightGallery
Интересный факт - разработчик также является автором плагина jQuery lightGallery, который вы найдете на GitHub, и при сравнении с описанным выше lightgallery.js, поймете, что они являются близнецами, только только один требует подключения jQuery, а второй - нет.