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

Подпишись на Telegram

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

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

Highslide.js

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

Движок 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.

На скриншоте выше обработка изображений в постах 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)');

    }

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

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

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

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

Описание — подключение к 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%;
}

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