Image Zoom — плагин WordPress для плавного увеличения изображений в модальном окне

Веб разработка » CMS Wordpress

Этот плагин для WordPress позволяет плавно увеличивать размер изображения при клике на него. В базовом состоянии это изображение остается вписанным в разеры основного контейнера. Устанавливается и настраивается очень просто и быстро.

Внимание! В последних версиях WordPress данный плагин стал работать некорректно. Разбираться не стал и написал свое более простое решение. WordPress: плавное увеличение изображений на Higslide

Такой подход позволяет не перегружать страницу большими графическими объектами. Но при необходимости пользователь всегда может нажать на него и увеличить до размеров, позволяющих рассмотреть мелкие детали.

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

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

Пример работы плагина Image Zoom

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

Уменьшенная копия изображения по размерам сетки

А на изображении выше при клике на него подгрузилась его увеличенная версия. Так работает данный плагин. Затемнение фона и прочие нюансы можно подкрутить в настройках.

Плавное увеличение изображения в модальном окне — загружается оригинал

Установка и настройка Image Zoom

Плагин без проблем устанавливается из репозитория WordPress. Параметры описывать нет смысла. Настройки не сложные и позволяют выбрать максимальные размеры, поменять скин и добавить текст на кнопки.

SL Image Zoom

Использование Image Zoom

Изображение будет увеличиваться только при условии, что оно является ссылкой и ссылается на другое изображение — более крупное. Делается это с помощью указания ссылки в редакторе, а далее плагин сам подхватывает условие и меняет код в готовой статье