Фев
5
0

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

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

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

Галерея с браузером изображений

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

FooGallery (WordPress Responsive Gallery Plugin)

FooGallery (WordPress Responsive Gallery Plugin)

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

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

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

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

Создание галереи в FooGallery

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

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

FooBox Image Lightbox WordPress Plugin

FooBox Image Lightbox WordPress Plugin

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

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

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

Lightbox в настройках FooGallery

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

Карусель Elementor

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

Карусель Elementor

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

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

рейтинг Оцените статью:
Ужасная статьяНичего интересногоТак себеНормальноХорошоКлассный постВ закладки!
(голосов - 7, средний балл: 5,71 из 7)
Загрузка...

категория Категории: Плагины;
теги Теги: , , , , , .
Оставить комментарий


Блог Wordpress Inside поможет вам научиться работать в вордпресс, закрепить и расширить имеющиеся знания. Плагины и шаблоны, разные хаки и функции wp, оптимизация и безопасность системы – все это и намного больше вы сможете найти на страницах нашего проекта!

Если хотите быстро и оперативно получать последние новости и статьи, то рекомендуем подписаться на обновления блога:

Поиск:
Последние посты
Лучшее в категории
Облако тегов
Скажи свое мнение!

В чем основные плюсы Wordpress?

Посмотреть результаты

Загрузка ... Загрузка ...
Друзья проекта
Последние новости