Анимированные и видео открытки на whatsapp, viber, в одноклассники

Приступаем к работе с плагином FooGallery

Я установил на своем тестовом сайте премиум-версию плагина. Сначала создадим галерею. Для административной панели WordPress перейдите в раздел FooGallery → Add Gallery и дайте ей название.

Загружаем изображения

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

Для предварительного просмотра изображений переключитесь на вкладку «Gallery Preview»:

Настраиваем параметры галереи

Для настройки внешнего вида и функционала галереи используйте параметр Gallery Settings. В первую очередь выберите базовый шаблон для галереи из выпадающего списка. После этого область предварительного просмотра автоматически обновится.

Например, вот обычная галерея в стиле masonry:

Ниже продемонстрирована галерея в стиле Polaroid:

Плагин предоставляет на выбор девять шаблонов галереи:

  1. Responsive image
  2. Image viewer
  3. Justified
  4. Masonry
  5. Simple portfolio
  6. Single thumbnail
  7. Polaroid PRO
  8. Grid PRO
  9. Slider PRO

Как только выберите шаблон, набор настроек галереи обновится. В настройках можно задать внешний вид и функции галереи. Рассмотрим доступные параметры:

General

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

Appearance

Вкладка содержит различные темы оформления, а также следующие параметры:

  • Границы.
  • Скругленные углы.
  • Тени.
  • Иконки загрузки.
  • Эффект при загрузке.

Также можно добавить фильтр для миниатюры (например, Instagram):

Hover Effects  (эффекты при наведении)

Установка эффекта, который возникает при наведении курсора мыши на изображение в галерее. Можно:

  • Добавить цветовой эффект. Например, оттенки серого.
  • Добавить эффект увеличения или уменьшения.
  • Показать подпись.
  • Показать иконку.

Также можно выбрать один из предустановленных стилей. Например, если выбрать пресет Layla…

…получится следующий эффект:

Настройки параметров подписей изображений.

Paging

Вкладка позволяет установить параметры нумерации страниц. Можно пропустить нумерацию страниц или добавить:

  • Постраничную нумерацию страниц галереи.
  • Бесконечную прокрутку.
  • Кнопку «Загрузить еще».

Если активировать пагинацию, то можно разбить галерею на несколько страниц и настроить их внешний вид.

Например, если установить размер страницы на 4, то кнопка «Load More» будет выглядеть следующим образом:

Filtering

Содержит фильтры Ajax для сортировки содержимого. Фильтрацию изображений можно установить по «Media Tags» или «Media Categories»:

Например, если добавить простую фильтрацию на базе тегов мультимедиа.

После будут установлены следующие фильтры:

Если посетитель сайта кликнет по фильтру, галерея отобразит только изображения с этим тегом (перезагрузка страницы не потребуется).

Опция расширенной фильтрации позволяет посетителям сайта выбирать сразу несколько фильтров.

Video

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

Плагин также позволяет импортировать видео из внешних источников.  Например, из YouTube.

Также в галерее можно смешивать изображения и видео.

Advanced

Вкладка позволяет задействовать ленивую загрузку и другие настройки. Также в боковом меню доступны дополнительные настройки:

  • Поддержка Retina.
  • Сортировка галереи.
  • Пользовательский CSS.

Есть функция массового копирования, которая позволяет быстро копировать настройки одной галереи и применять их к другим галереям.

Встраиваем галерею

После настройки всех необходимых функций галереи очень просто встроить ее на сайт. Для начала, если используется новый редактор блоков WordPress, добавьте специальный блок FooGallery:

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

Создаем альбомы

С помощью плагина FooGallery можно создавать не только галереи, но и альбомы. Они представляют собой коллекции разных галерей.

В альбоме доступен не только список всех галерей, но и ссылки на постоянные страницы для каждой галереи.

По умолчанию структура URL-адресов для этих постоянных страниц такова: /page-with-album/gallery/some-gallery.

Виды оформления галереи NextGEN Gallery

В бесплатной версии NextGEN Gallery доступно 3 вида отображения галереи:

  • Basic Thumbnails
  • Basic Slideshow
  • Basic ImageBrowser

Basic Thumbnails

NextGEN Basic Thumbnail Gallery – это сетка изображений, которые при нажатии открываются в полноэкранном режиме. Некоторые функции, которые вы можете добавить в свою галерею миниатюр:

  • установить пользовательскую обрезку миниатюры;
  • установить пользовательский размер миниатюр;
  • разбивка фотографий на страницы (установить количество миниатюр изображений на странице галереи).

Basic Thumbnail Gallery выглядит следующим образом:

Basic Slideshow

NextGEN Basic Slideshow – стандартное слайдшоу. Изначально отображается 1 изображение, которое автоматически меняется через заданный интервал времени. В дополнительных настройках можно включить навигационные стрелки для более удобного просмотра. При нажатие открывается полноэкранный режим, где стрелки включены автоматически.

Ссылка на основную публикацию