WordPress: плавное увеличение изображений на Higslide

Плагин для плавного увеличения изображений для CMS WordPress.

Что делает плагин: при клике на изображение оно плавно увеличивается в модальном окне.

Цель плагина: коробочный CMS WordPress никак не обрабатывает большие изображения. Их можно обрезать с сохранением параметром и поставить ссылку на полный размер. Это обычная ссылка — изображение откроется на отдельной странице в этом же окне.

Преимущества над стандартами WordPress: я написал файловое решение с перебором страницы и обработкой данных в JavaScript цикле. Это не PHP модуль. Он не внедряется в движок скрипта, не грузит базу. Это простой JavaScript.

Существующие решения увеличения изображений

Для CMS WordPress есть ограниченное число плагинов, которые решают задачу плавного увеличения изображений в модальном окне. Один такой я использовал, но при переходе на PHP 8.0 он начал отрабатывать криво. Да и не обновлялся около 5 лету уже.

Highslide.js — ядро плагина

Никаких дополнительных манипуляций с изображениями во время публикации в редакторе делать не нужно. Все в базе. Состоит из готового ядра Highslide.js и небольшого обработчика для автоматизации CMS WordPress.

Это древнейший скрипт. Один из первых по функционалу плавного увлечения изображений. Помню его еще из нулевых. Когда-то давно использовал на своих простеньких сайтах.

Движок Highslide включает в себя около 20 различных видов плавного увеличения изображений. В данном решении используется библиотека highslide-with-gallery.js. Она подогнана и внедрена в CMS WordPress. Поэтому дальнейшее описание будет именно об этой конкретной библиотеке.

Описание — JavaScript

Ядро плагина описывать тут не буду. Для этого есть официальный сайт. Пример инициализации плагина для ссылки с вложенным изображением:

<a href="https://someurl.domain" class="highslide" onclick="return hs.expand(this)"><img src="https://someimageurl.domain"></a>

При клике на такое изображение его перехватит обработчик плагина и отрисует CSS. Иными словами для использования данного плагина на CMS WordPress нам нужно получить все изображения на странице в виде ссылки и добавить к ним инициализацию highslide.

Установка плагина плавного увеличения изображений в модальном окне

Перейти по ссылке и скачать файлы с моего оригинального проекта: https://itikhonov.art/wordpress-images-modal-higslide/

Загрузить папку Highslide в папку с вашей темой оформления. Файл script.js по желанию можно добавить в файл с другими мелкими скриптами, например, как у меня: https://devarts.pro/wp-content/themes/wpdev/js/init.js

Два оставшихся файла (или 3 — каждому свое): highslide.css и highslide-with-gallery.js желательно подключить через function.php

Этап 2 — скрипт инициализации плагина

На скриншоте выше обработка изображений в постах WordPress. Все изображения заворачиваются в контейнер FIGURE и далее уже по схеме A > IMG. Значит нам нужно получить все такие блоки на странице и прогнать каждую ссылку в цикле:

    // HIGHSLIDE IMAGES

    var $ = jQuery;

    // HIGHSLIDE INITIALISATION
    hs.graphicsDir = '/wp-content/themes/{YOUR_THEME/PLUGIN_FOLDER/}/highslide/graphics/';
    hs.align = 'center';
    hs.transitions = ['expand', 'crossfade'];
    hs.wrapperClassName = 'dark borderless floating-caption';
    hs.fadeInOut = true;
    hs.dimmingOpacity = .75;

    // Add the controlbar
    if (hs.addSlideshow) hs.addSlideshow({
        //slideshowGroup: 'group1',
        interval: 5000,
        repeat: false,
        useControls: true,
        fixedControls: 'fit',
        overlayOptions: {
            opacity: .6,
            position: 'bottom center',
            hideOnMouseOut: true
        }
    });

    // WORDPRESS ADAPTATION

    var figure = document.querySelectorAll('figure a');

    for(let i = 0; i < figure.length; i++){

        $(figure[i]).addClass('highslide').attr('onclick', 'return hs.expand(this)');

    }

Скрипт выше состоит из большого куска инициализации самого плагина. Своеобразное API, которое вытаскивает из большого ядра нужные нам настройки. Здесь нужно прописать путь к папке с комплектными иконками:

hs.graphicsDir = '/wp-content/themes/{YOUR_THEME/PLUGIN_FOLDER/}/highslide/graphics/'

Этап 2 — ядро плагина

В папке Highslide найти файл highslide-with-gallery.js. В нем найти похожую строку с адресом к папке с картинками и также прописать свой путь:

Более детальное описание, файлы для скачивания и баги плагина в моем другом проекте по ссылке: https://itikhonov.art/wordpress-images-modal-higslide/