Плагин для плавного увеличения изображений для 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://blog.devarts.pro/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://blog.devarts.pro/wordpress-images-modal-higslide/
Комментарии