Очумелые ручки! Строим галерею с «бэком» на Wordpress и фронтом на fancybox 3

Йоу-йоу! Работал я над сайтом компании, которая занимается производством домов из древисины. Им очень хотелось сделать сайт с огромным количеством фоторгафии и сделать это на одной странице с разделением на несколько галлерей. Дело это всё «крутиться» на WordPress’е. А сейчас уже работает как часики) Так, что погнали

Нам понадобиться

Да-да! Всё как в очумелых ручках! Так вот, нам понадобитья:

  1. Рабочий сайт на WordPress
  2. Плагин real.PostImages (для добавления картинок к записи)
  3. Подключенный jQuery 3
  4. Подключенный fancybox 3

Подготовка

Нужно создать папку в которой будет хранится весь наш код внутри темы. Я у себя создал папку modiles > fancy-gallery. А там создал файлы: index.php и app.js. И подключил в function.php

О том как правильно подключать скрипты в wordpress вы можете прочитать в моей статье в моей статье.

Шаг 1. Создание произвольного типа записи

Это нужно для того, чтобы можно было в аднимке создавать несколько галлерей. Так что в index.php пишем

Проверяем появился ли новый тип записей в админке. Добавляем произвольное поле для id галереии. Мы позже будем его использовать в JS.

Шаг 2. Выводим в цилке записи на странице.

Для вывода на странице нужно вызвать событие и повесить на него хук. На странице на которой вывожим пищем do_action(‘x_gallery’); а в нашем php файле продолжаем.

Шаг 3. JS

Вы уже увидел, что мы коснулись в предудущем шаге и чтобы внести ясность, что за скрипт в итогре будет я вам напишу пример кода.

Это вызов моего js, который создаёт галлерею во время загрузки страницы. В конструктор передан объект с моими данныйми и объект jquery. В моем объекте есть id галлереи и массив с адресами всех картинок. Собственно к делу. В app.js пишем

Нужно заметить, что в fancybox3 распределении галлерей несколько иначе, чем в версии 2.x и теперь инициализация разных галлерей делается с помощью javascript.

И теперь данный вызов будет следить за появлением новых элементов галлереи. Это очень удобно. Но с документации fancybox пришлось вчитываться)

Финиш

Все готово! Можете пользоваться. В итоге у вас получиться примерно это: