Вы здесь: Главная » JavaScript » Замена галереи Fancybox на чистом JavaScript

Замена галереи Fancybox на чистом JavaScript

Скорей всего, вы слышали или уже использовали такую галерею, как Fancybox, и, соответственно, знаете, что подключать ее нужно вместе с jQuery. Но некогда популярная jQuery сейчас довольно часто уходит в тень перед развернувшим крылья нативным JavaScript-ом и CSS-анимациями. Это также касается и jQuery-плагинов, которые позволяют делать многое вещи, в том числе и фото- и видео-галереи.

Если вы задумались о том, чтобы заменить Fancybox на плагин, использующий чистый JavaScript, например, с целью оптимизации загрузки ваших страниц, то в этой статье вашему вниманию предлагается плагин lightgallery от Sachin N. Вы можете узнать об этой галерее на GitHub или посмотреть демо на официальном сайте lightgallery.

Преимущества фотогалереи (согласно документации):

  1. Полностью отзывчивый плагин.
  2. Модульная архитектура со встроенными плагинами.
  3. Touch-события и поддержка мобильных устройств.
  4. Поддержка перетаскивания мышью для настольных компьютеров.
  5. Двойной клик/ двойное касание для того, чтобы увидеть фактический размер изображения.
  6. Анимированные миниатюры (эскизы).
  7. Возможность обмена фотографиями в социальных сетях.
  8. Поддержка видео Youtube, Vimeo, Dailymotion, VK и HTML5.
  9. 20+ переходов CSS3 с аппаратным ускорением.
  10. Динамический режим.
  11. Полноэкранная поддержка.
  12. Поддержка масштабирования.
  13. API истории браузера.
  14. Адаптивные изображения.
  15. Поддержка HTML iframe.
  16. Несколько экземпляров на одной странице.
  17. Легко настраивается с помощью CSS (SCSS) и настроек.
  18. Умная предварительная загрузка изображений и оптимизация кода.
  19. Клавиатурная навигация для рабочего стола.
  20. Поддержка значков шрифтов.
  21. Поддержка специальных возможностей.
  22. Поворот изображения (с дополнительным плагином).

Подключаем плагин lightgallery

Подключение плагина lightgallery состоит из двух этапов:

  1. Подключение css-файла в <head> документа
  2. Подключение js-файла перед закрывающимся </body>:

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

В обоих случаях вместо css- и/или js-файла вы можете подключить минифицированную версию плагина. Кроме того, можно найти js-файл на CDN по ссылке https://www.jsdelivr.com/projects/lightgallery.js.

Lightgallery также поддерживает модули AMD, CommonJS и ES6. При использовании AMD убедитесь, что lightgallery.js загружается до модулей lightgallery.

HTML-разметка для lightgallery

В документации к lightgallery написано, что этот плагин не заставляет вас использовать какую-либо конкретную разметку, т.е. вы можете использовать любую разметку, какую захотите. Однако предлагается вариант разметку, в которой будет один div-обертка, внутри которого размещены ссылки на изображения с самими изображениями, а именно:

Вызов плагина

Теперь вам осталось добавить собственный код после того, как вы подключили скрипт плагина. Если для div-обертки для галереи вы задали атрибут id, как в разметке, то вам останется добавить совсем небольшой код:

Если вы не хотите назначать id для элемента-обертки, задайте ему класс или data-атрибут, а затем используйте метод document.querySelector():

Учтите, что метод document.querySelector() возвращает вам первый элемент, найденный на странице или в другом html-элементе, поэтому его нельзя использовать для нескольких галерей.

В том случае, если у вас все же есть несколько галерей на одной странице, вы не можете дать им один id, т.к. это противоречит HTML-спецификации, да и метод document.querySelector() не подойдет, т.к. имеет смысл все галереи объединить одним классом, на выручку придут методы document.querySelectorAll('.className')  или document.getElementsByClassName('className'), например так:

Давайте прямо сейчас посмотрим, что умеет Lightgallery "из коробки" (открыть пример в новой вкладке): показывать и листать изображения, уменьшать их под размер экрана, выводить описания на основе атрибутов title для ссылок, предоставлять ссылку на скачивание изображения, показывать счетчик изображений в виде "номер текущего фото/всего фотографий".

Это далеко не все "умения" Lightgallery. Просто остальные его возможности, как правило, зависят от дополнительных js- или css-файлов, которые разработчики разделили по функциональности.

Использование настроек плагина

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

То есть после указания ссылки на элемент вы добавляете объект, который использует установленные для плагина свойста и варианты их значений. Придется немного попрактиковаться в английском.

Некоторые настройки, которые было бы очень интересно сделать, возможны только при подключении дополнительных плагинов.  Кстати, найти все плагины можно в папке demo/js на GitHub плагина:

Все плагины в составе lightgalleryРассмотрим некоторые плагины подробнее.

Анимированные миниатюры

Анимированные миниатюры - это уменьшенные изображения в нижней части галереи, которые являются кликабельными и показывают пользователю, как выглядит картинка.

Для того чтобы миниатюры у вас появились, вам необходимо добавить еще один плагин после основного скрипта lightgallery.min.js:

Затем при вызове основной функции плагина, вы записываете в фигурных скобках опцию thumbnail:true

Теперь вы можете посмотреть, что получилось с миниатюрами (открыть в новой вкладке).

Изменение html-разметки и использование селекторов:

В скрипте необходимо записать такой вызов плагина:

В том случае, если вы хотите запускать фотогалерею по клику на текстовой ссылке, разметка и скрипт меняются так:

CSS-переходы для анимации смены изображений

Вы можете добавить в <head> еще один css-файл lg-transitions.min.css, который есть в архиве у разработчиков и получить возможность выбирать, каким образом картинки в галерее будут сменять друг друга. Набор эффектов перехода довольно приличный, и вы можете попробовать применить их сами в примере ниже (открыть в новой вкладке).

Для того чтобы смена эффектов была возможна, использовался такой скрипт:

Вам же для того, чтобы использовать какой-то один эффект, отличный от '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'.

В результате ваш код будет примерно таким:

Полноэкранный режим и увеличение/уменьшение фото

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

Выглядят кнопки примерно так:

Полноэкранный режим и кнопки увеличения/уменьшения картинок

Воспроизведение видео

Плагин 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 с постером

Внимание! Для корректного воспроизведения видео Lightgallery требует, чтобы в ваш документ был включен плагин для видео, доступный на GitHub.

Настройки для видео

При добавлении Lightgallery  для видео вы можете указать такие настройки:

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

Всю документацию по плагину вы найдете на англоязычном сайте.

Лицензия для использования плагина lightgallery.js

Лицензия с открытым исходным кодом

Если вы создаете приложение с открытым исходным кодом по лицензии, совместимой с лицензией GNU GPL v3, вы можете использовать этот проект в соответствии с условиями GPLv3. Это значит, что вы пользуетесь плагином бесплатно.

Коммерческая лицензия

Если вы хотите использовать lightgallery.js для разработки коммерческих сайтов, тем, проектов и приложений, вам подойдет коммерческая лицензия. При использовании этой опции ваш исходный код остается закрытым. Узнать больше о коммерческой лицензии вы можете по ссылке.

Несколько слов о jQuery lightGallery

Интересный факт - разработчик также является автором плагина jQuery lightGallery, который вы найдете на GitHub, и при сравнении с описанным выше lightgallery.js, поймете, что они являются близнецами, только  только один требует подключения jQuery, а второй - нет.

jquery-lightgallery

Автор: Админ

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

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