Увеличение картинки при наведении. Плагин WP Image Zoom

Черновик

Хотите добавить функцию zoom к изображениям? В этой статье я расскажу, как сделать увеличение картинки при наведении с помощью плагина WordPress.

Эта функция бывает чрезвычайно полезна. Ее можно увидеть в интернет-магазинах или на сайтах фотографов/художников. Масштабирование изображений позволяет пользователям видеть детали, которые они не видят на изображении нормального размера.

Как добавить увеличение картинки при наведении

Первое, что вам нужно сделать — установить и активировать плагин WP Image Zoom.

Если вы устанавливаете плагин впервые, посмотрите наше видео «3 способа установки плагина».

Увеличение картинки при наведении в товарах Woocommerce

В панели администратора перейдите в новую вкладку WP Image Zoom.

Черновик

На вкладке «General Settings» вы можете задать настройки изображений товаров Woocommerce, миниатюр, вложений, рубрик и пр. А также есть возможность удалить лайтбокс, чтобы посетители сайта использовали функцию увеличения.

Черновик

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

Важно: Проверьте типы поддерживаемых лайтбоксов перед включением функции.

Черновик

Не забудьте сохранить изменения.

Теперь перейдите во вкладку «Zoom Settings».

Сначала выберите тип линзы: круг, квадрат или окно.

Черновик

Можете сразу проверить, как это будет смотреться.

Черновик

Далее можете выбрать тип курсора, эффект анимации, увеличение картинки при наведении или клике, уровень увеличения.

Важно: Некоторые из этих функций доступны только для PRO версии плагина WP Image Zoom.

Черновик

Теперь перейдите во вкладку «Lenz», чтобы выбрать размер, цвет, настройки рамки линзы и пр.

Важно: Эти настройки применимы к круглой или квадратной линзе.

Черновик

Если вы выбирали тип линзы «окно», тогда во вкладке «Zoom Window» вы можете настроить ширину и высоту, расположение, расстояние от основного изображения, рамки и пр.

 

Черновик

Во вкладке «Custom Text» вы можете добавить текст для изображения, выбрать размер, цвет и тип выравнивания.

Черновик

Не забудьте сохранить все настройки.

Вышеуказанные настройки применяются для изображений товаров Woocommerce.

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

Увеличение картинки при наведении в записях и страницах

К сожалению, эта функция не предоставляется по умолчанию.

Вы можете добавить zoom к изображениям в записях и страницах вручную.

Черновик

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

Черновик

Функция zoom часто включается в премиум темы WordPress по умолчанию, но если в вашей теме такого нет, можете использовать плагин WP Image Zoom.

ПОСМОТРИТЕ ТАКЖЕ:
WPHelpful – плагин, созданный Заком Гилбертом и Полом Джарвисом. С его помощью пользователи могут оценить
EditorsKit стал своего рода «hotfix»-плагином для Gutenberg, особенно учитывая свежий релиз 1.14 на прошлой неделе.
В ближайшем релизе Chrome (76) появится атрибут «loading», поддерживающий нативную браузерную «ленивую загрузку» страниц. Реализация
Разработчик WordPress-тем и плагинов Бен Джиллбэнкс придумал альтернативу плагину Jetpack с акцентом на скорости, удобстве
В начале сентября вышел новый релиз Gutenberg 6.4 – в нем был дополнительно улучшен блок
Fabrica Dashboard – относительно новый плагин, выпущенный в начале этого года командой Yes We Work

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