Плагин WP Image Zoom

 


Всем привет! Сегодня расскажу вам о плагине WP Image Zoom, который множество раз выручал меня при создании интернет-магазина на базе WordPress и плагина WooCommerce.

Плагин WP Image Zoom прост в настройке и работает безотказно. Вдобавок он не грузит движок. Но есть и минус — PRO-версия. Но уверяю вас, даже без покупки расширенной версии , плагин достоин вашего внимания. Стало интересно? Но сперва, рекомендую прочесть не менее интересную статью «Скроллинг».

Установка плагина

Для начала установим и активируем плагин WP Image Zoom:

wp image zoom

После этого кликните в админке по пункту «WP Image Zoom»:

wp image zoom меню

Далее, загрузится страница настроек плагина. Изначально мы находимся во вкладке «Zoom Settings»:

zoom settings

к оглавлению ↑

Настройка плагина

Разберём поочерёдно каждую вкладку. Начнём с настроек визуального поведения «Zoom Settings».

Шаг 1. Режим отображения

Эта настройка отвечает за форму объективна. Доступно четыре режима:

визуальное поведение линзы

Шаг 2. Визуальная проверка

На втором шаге, отмеченным как «Step 2» можно визуально проверить настройки:

визуальная настройка линзы

Шаг 3. Настройка линзы и окна масштабирования

На третьем этапе нам доступно больше настроек чем видно. Все они разбросаны по вкладкам:

шаг 3 вкладки

Начнём с вкладки «General»:

general

Здесь вы можете выбрать вид курсора (Cursor Type) и скорость (Animation Easing Effect) анимации линзы. К сожалению, условия активации зума и кратности увеличения можно изменить только в PRO-версии плагина.

Следующая вкладка «Lens»:

lens

Из доступных настроек мы можем изменить толщину (Border Thickness), цвет (Border Color) и время (Fade Time) появления линзы на изображении:

толщина линзы на изображении

Также можно включить затемнение изображения (Tint), прозрачность (Tint Opacity) и цвет (Tint Color) затемнения, кроме внутренней части линзы при наведении:

затемнение фона вне линзы

Вкладка «Zoom Window» доступна лишь при выборе в первом шаге «окно масштабирования»:

окно масштабирования

Во вкладке «Zoom Window» можно настроить форму окна масштабирования (Zoom Window Width и Zoom Window Height):

форма окна масштабирования

Также есть возможность выбрать дистанцию окна масштабирования от основного изображения «Distance from the Main Image». По вашему желанию можно изменить толщину (Border Thickness) и цвет (Border Color) обводки окна масштабирования. А если вам и этого мало, то реализована возможность задать размер (Shadow Thickness) и степень закругления (Rounded Corners) тени окна масштабирования. И напоследок, настройка «Fade Time» указывает через какое время появится окно масштабирования, как и в настройках линзы.

Последняя вкладка «Custom Text» работает только на PRO-версии.

к оглавлению ↑

Шаг 4. Сохранение

Последний шаг — сохранение:

сохраниться

Шаг 5. Глобальные настройки

Переходим к глобальной вкладке «General Settings»:

general settings

По умолчанию включены настройки масштабирования продуктов WooCommerce и миниатюр. Дополнительно можно включить линзу на мобильных устройствах (Enable the zoom on mobile devices) и масштабирование изображения категорий (Enable the zoom on WooCommerce category pages). Не забудьте сохраниться.

На этом настройка плагина WP Image Zoom завершена. Спасибо за проявленный интерес к статье.

Делитесь полезной информацией с друзьями:

Рекомендую:

Книга «Wordpress для начинающих» Дэрил Бартлетт Книга «Wordpress для начинающих» Дэрил Бартлетт
Книга «Создание веб-сайта для чайников» Дэвид Кроудер Книга «Создание веб-сайта для чайников» Дэвид Кроудер

Сергей

Привет! Моё имя Сергей, и я — автор этого блога. Рад, что вас заинтересовал мой проект. Не забывайте оставлять комментарии к статьям. По всем другим вопросам обращайтесь через контактную форму на странице "Контакты".

Читайте также:

комментария 2

  1. Макс:

    Именно этот плагин я и искал. Остальные только и делают что увеличивают в всплывающем окне с огромными кнопками на картинке и рамками не к месте.

    • Сергей:

      Макс, привет, я сам когда его нашёл был приятно удивлён. По крайней мере этот плагин стоит на двух ИМ что я делал.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Вверх