Zoom изображения WordPress при наведении мышки

Изображения WordPress в данный момент не достаточно хорошо отработаны. Конечно же, в CMS есть все необходимые инструменты для того, чтобы поработать с картинками, загрузить их, назначить нужные атрибуты. Однако чего-то большего там нет.

Для того чтобы изображения WordPress имели какие-то особые интересные дизайнерские эффекты, придётся использовать дополнительные плагины. В этой статье мы расскажем о дополнении, которое позволяет сделать zoom картинки при наведении мышки.

Zoom картинки с плагином WP Image Zoom

Плагин WP Image Zoom позволяет создать zoom изображения при наведении мышки на неё. То есть, если навести курсор мышки на картинку, то можно будет увидеть какую-то увеличенную её область. Такой эффект вы часто могли видеть в интернет-магазинах. И этот плагин отлично подойдёт для интернет-магазинов на WordPress.

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

Для того чтобы начать работать с плагином, скачайте WP Image Zoom, установите его на своём сайте и активируйте. После этого в консоли появится новый пункт «WP Image Zoom». Перейдите в него, чтобы настроить плагин.

Во вкладке «General settings» есть основные опции плагина:

• Enable the zoom on WooCommerce products. Включает эффект zoom изображения WordPress для товаров магазина WooCommerce.
• Enable the zoom on WooCommerce category pages. То же самое только для изображений категорий WooCommerce.
• Enable the zoom on mobile devices. Включает zoom для мобильных устройств.
• Compatible with LazyLoad (unveil.js). Включает скрипт для совместимости. Рекомендуется включить, если что-то отображается не так, как надо.

Во вкладке «Zoom settings» собраны настройки внешнего вида эффекта изображения WordPress.

• Choose the Lens Shape. Здесь нужно выбрать эффект. Есть четыре вида эффекта. Внизу есть предпросмотр с картинкой, и при выборе того или иного эффекта можно сразу навести мышку и посмотреть, как это выглядит.
• Make more fine-grained configurations on the zoom. Тут можно выбрать внешний вид курсора мышки и установить уровень анимации.

Когда вы создали все настройки, можно применить эффект к изображению WordPress. Для этого загрузите в редакторе страниц или записей картинку обычным способом, выделите её мышкой и нажмите на панели инструментов на кнопку «Image zoom».

Возможно, вам также будет интересен этот плагин, который создаёт другой эффект изображения WordPress при наведении мышки.