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

Каких-то вменяемых плагинов для плавного увеличения изображений в модальном окне найти не удалось. Есть один, но в новых версиях PHP он начал выдавать ошибки.

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

Ядро Highslide.js

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

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

Описание — JavaScript

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

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

Как видно, это обычная ссылка с изображением вместо текста, которой добавили два параметра: CLASS и ONCLICK.

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

Интересующие нас изображения в постах 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

    // Находим все ссылки в контейнере <figure>
    var figure = document.querySelectorAll('figure a');

    // Прогоняем их в цикле и вешаем инициализацию ядра highslide
    for(let i = 0; i < figure.length; i++){

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

    }

Нас интересует раздел WORDPRESS ADAPTATION. Все что выше — это API для получения из огромного ядра Higslade конкретных значений для нашей библиотеки. На них не стоит обращать внимание за исключением строки hs.graphicsDir.

В нее нужно прописать свой путь к папке с изображениями (иконки для галереи), заменив {YOUR_THEME/PLUGIN_FOLDER/} на свои значения:

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

Аналогичные настройки нужно сделать и в другом файле. В папке Highslide найти файл highslide-with-gallery.js. В нем найти строку graphicsDir и также прописать свой путь. Пример на скриншоте ниже.

Подключение к WordPress

1. Скачать в конце статьи архив с плагином.
2. Поместить папку highslide в папку с темой (например в THEME/js/)
3. Отдельно подключить скрипт инициализации выше. Для этого обычно используется отдельный файл с небольшими скриптами. Мой пример — жми.
4. По желанию подключить все файлы через файл functions.php или прописать в HEAD следующее:

• highslide/highslide-with-gallery.js
• highslide/highslide.css
• js/script.js — или дописать в свой аналог

Подключение — итог

1. Поправить путь к папке с картинками в скрипте с инициализацией (см. выше)
2. Поправить тот же путь в файле ядра (см. выше)
3. Подключить два (или три) файла в functions.php или прописать в HEAD

Баги и фиксы на будущее

Это косяк и недоработка со стороны разработчика ядра. При клике изображение увеличивается в модальном окне, но его размеры искажаются и оно, фактически, не увеличивается, а сильно сжимается.

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

img{
  max-width: 100%;
}

Файлы для скачивания