Фев

Как сделать галерею с браузером изображений и Lightbox эффектом (2 варианта)

Сегодня хочу поделиться одним оригинальным и функциональным модулем эффектной галереи. У меня была достаточно специфическая задача, решение для которой оказалось найти не так-то просто (обязательно добавлю его в список лучших плагинов картинок для WordPress). В общем, на одном сайте требовалось сделать так называемый браузер изображений, когда при клике на картинку во всплывающем окне открывается не только ее увеличенная версия, но и есть возможность просматривать предыдущие/следующие фотки.

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

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

FooGallery (WordPress Responsive Gallery Plugin)

Скачали плагин более 200тыс человек, работа над ошибками кипит. Галерея является адаптивной, легкой, быстрой, поддерживает новый редактор Gutenberg. Здесь есть:

6 видов отображения: обычный, портфолио, заполнение всего пространства по ширине и в виде кирпичной кладки по высоте (Masonry) + галерея открывающаяся во всплывающем окне из одной картинки (почти то, что мне было нужно).
2 вида отображения альбомов галереи.
Поддержка отложенной загрузки изображений Lazy loading.
Точки для навигации.
Виджет.
Импорт из NextGen.
Множество функций и настроек в админке: перетаскивание фоток Drag n Drop, превью, пользовательские CSS-стили, шорткоды.

Есть также ПРО версия с гораздо большим числом полезных опций, но для нашей текущей задачи бесплатной хватает.

После установки в админке появится целый раздел FooGallery, где будут разные настройки, возможность подключить расширения, активировать лицензию и т.п. Нас интересует исключительно создание фотогалереи – кликаем по менюшке “Add New” и видим следующую картину.

Сначала вам нужно добавить парочку фоток для работы. Затем определяете тип/вид отображения, и уже в зависимости от этого, будут появляться определенные настройки. Например, для Image Viewer (браузера картинок) не предусмотрены страницы, поэтому их на скриншоте выше и нет.

В качестве ссылки на фото, как видите, указан вариант Full Size Image (Lightbox), то есть открытие оригинальной фотографии с эффектом затемнения фона. И вот тут нам пригодится следующий плагин…

FooBox Image Lightbox WordPress Plugin

Здесь около 100тыс скачиваний, но оценка почему-то не самая высокая и более 15-ти недовольных отзывов (за рекламу PRO в админке?). Как бы там ни было, с задачей своей модуль справляется, а именно:

Он добавляет адаптивный Lightbox эффект при увеличении ваших изображений.
Прикольно, что скрипт подстраивается под портретный и пейзажный режим поворота мобильного устройства + выглядит неплохо.
Поддерживает обычную WordPress-галерею, а также некоторые другие. Если честно, по описанию не совсем понял, совместимость с разными плагинами имеется только в PRO-версии или бесплатной тоже, но вот с решением от тех же разработчиков (FooGallery Gallery WordPress Plugin) все 100% работает.
Активируется сразу после установки, каких-то дополнительных параметров нет. Но продвинутые разработчики смогут задать на каких страницах нужно использовать скрипт.

После установки новый Lightbox появится в настройках галереи, рассмотренной выше:

Выбираете данный параметр и, по сути, все. Дополнительно можете глянуть разные опции FooGallery – там есть и выбор эффекта наведения, и внешний вид элементов, и заголовки.

Карусель Elementor

Чуть позже я совершенно случайно увидел еще один вариант решения задачи – через визуальный редактор Elementor. В нем имеется виджет под названием “Карусель”. После добавления карусели на страницу и выбора фоток для отображения задаете ей соответствующие настройки:

А именно: показывать 1 слайд за раз, ставить ссылку на медиафайл и использовать лайтбокс. Да, эффект увеличения будет стандартный, но при этом он также допускает навигацию между следующим/предыдущим изображением. То, что нужно!

На 90% уверен, что данный виджет реально найти в бесплатной версии Elementor’а. В противном случае советую купить безлимитную One-подписку на премиальные шаблоны и модули:) Либо используйте FooGallery – тоже очень приятная и функциональная галерея.