
Плагин для плавного увеличения изображений для CMS WordPress. Из коробки изображения не обрабатываются никак. Изображение просто открывается на отдельной странице. Что более печально — на этой же.
Каких-то вменяемых плагинов для плавного увеличения изображений в модальном окне найти не удалось. Есть один, но в новых версиях 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
- Скачать в конце статьи архив с плагином.
- Поместить папку highslide в папку с темой (например в THEME/js/)
- Отдельно подключить скрипт инициализации выше. Для этого обычно используется отдельный файл с небольшими скриптами. Мой пример — жми.
- По желанию подключить все файлы через файл functions.php или прописать в HEAD следующее:
- highslide/highslide-with-gallery.js
- highslide/highslide.css
- js/script.js — или дописать в свой аналог
Подключение — итог
- Поправить путь к папке с картинками в скрипте с инициализацией (см. выше)
- Поправить тот же путь в файле ядра (см. выше)
- Подключить два (или три) файла в functions.php или прописать в HEAD
Баги и фиксы на будущее
Это косяк и недоработка со стороны разработчика ядра. При клике изображение увеличивается в модальном окне, но его размеры искажаются и оно, фактически, не увеличивается и сильно сжимается.
img{
max-width: 100%;
}