Очень простой плагин плавного увеличения изображений, который я написал себе для CMS WordPress. Плагин создавался для замены имеющихся решений, которые я ранее нашел в интернете. Эти решения перестали работать, другого не нашел и с помощью небольшой и очень простой библиотеки Highslide создал себе плагин, который позволяет увеличивать изображения в модальном окне при клике на него. Подробная инструкция по настройке и описание работы плагина смотрите дальше по тексту.
Это не плагин, а скрипт. Он не внедряется в бизнес-логику CMS WordPress и устанавливается в качестве обычного скрипта из трех файлов.
Главное правило для его работы показано на скриншоте выше — изображение, которое нужно увеличивать, должно вести на медиафайл, т.е. быть ссылкой.
На момент написания данного плагина, я использовал для плавного увеличения изображений в модальном окне плагин Image Zoom, о котором ранее рассказывал у себя на сайте. Но он перестал обновляться, а с переходом на PHP 8.0 и вовсе стал работать с ошибками.
Как работает данный плагин увеличения изображений в модальном окне
Ядром плагина выступает библиотека Highslide.js. Это одна из первых библиотек по плавному увлечению изображений. Знаком с ней еще из 2010-х и активно использовал на своих простеньких сайтах.
Сама библиотека Highslide.js включает в себя около 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>
Как видно, конструкция обязательно состоит из ссылки и двух ключевых парамеров: class=»highslide» onclick=»return hs.expand(this)». При клике на ссылку, вызывается JS-функция hs.expand(this) в связке с CSS-классом highslide. Добавить два этих аттрибута можно простым перебором всех ссылок в DOM и добавлением данного аттрибута в цикле FOR.
Для начала найдем критерий поиска ссылок на странице и соберем их в массивю
На скриншоте выше обработка изображений в постах WordPress. Все изображения заворачиваются в контейнер FIGURE и далее уже по схеме A > IMG. Значит нам нужно получить все такие блоки на странице и прогнать каждую ссылку в цикле.
var figure = document.querySelectorAll(‘figure a’);
for(let i = 0; i < figure.length; i++){
$(figure[i]).addClass('highslide').attr('onclick', 'return hs.expand(this)');
}Это и весь обработчик. Остается лишь подключить наш скрипт и правильно прописать пути для всех файлов.
Установка плагина плавного увеличения изображений в модальном окне
Установка и настройка плагина полностью ручная. Инструкцию расписываю так, как это делаю я для себя. Если вы разбираетесь в теме — делайте по своему. Для начала нужно скачать плагин по ссылке ниже:
- Папку Highslide загрузить папку с вашей темой оформления.
- Файл script.js подключить отдельно или добавить к другим скриптам, например, как это делаю я: https://devarts.pro/wp-content/themes/wpdev/js/init.js
- Файлы: highslide.css и highslide-with-gallery.js рекомендуется подключить по всем правилам — через function.php. Подсвечено в примере на скриншоте ниже:
Настройка ядра JavaScript
В папке Highslide в файле highslide-with-gallery.js найти переменную graphicsDir и на примере моего пути заменить WPDEV/JS на свой путь. В моем примере путь указывает на папку JS в теме оформления WPDEV. И уже в нее я загрузил HIGHSLIDE.
Дальше загружаете изображения, как и обычно. Скрипт найдет те изображения, которые обработаны в виде ссылки т.е. автоматически уменьшены и ведут на отдельную страницу и подставит к ним соответствующий обработчик.
Настройка API JavaScript
В файле script.js находится вызов и быстрые настройки плагина. Обычно они добавляются к другим аналогичным настройкам в один единый файл. В моем случае, я добавил этот код сюда: themes/wpdev/js/init.js. Как вы будете поступать, решать вам. Можно подключить его отдельным файлом в традиционные HEAD, но в WordPress так не принято.
Здесь нам нужно сделать почти аналогичную настройку. Найти переменную hs.graphicsDir и точно так же прописать путь к папке с графикой.
Текстовый вариант:
hs.graphicsDir = '/wp-content/themes/{YOUR_THEME/PLUGIN_FOLDER/}/highslide/graphics/'Если все сделаете правильно, то все изображения, завернутые в контейнер FIGURE и являющиеся ссылками A HREF, т.е. имеющие уменьшенную копию через базовый функционал WordPress, будут обрабатываться данным плагином.
Комментарии