Увеличительное стекло изображений функция зум на сайт WordPress Woocommerce

WooCommerce

Привет! С помощью плагина – WP Image Zoooom, вы сможете добавить на свой сайт функцию зум или увеличительное стекло для изображений. Если вы бывали на сайтах интернет-магазинов, к примеру М видео или adidas, то вы могли заметить там функцию увеличительного стекла. Когда переходишь на страницу какого либо товара, то при наведении курсора мыши на изображение товара, появляется увеличительное стекло. То есть, вы можете посмотреть фото товара увеличенным, рассмотреть какие-то детали и т.д.

 

13-02-2016 16-14-12_mini

 

 

Плагин Woocommerce Zoom увеличение изображений товаров

 

Данный плагин идеально подойдёт онлайн-магазинам созданным с помощью плагина WooCommerce. Но, так же данный плагин можно применять к любым изображениям, на любом WordPress сайте. Установить плагин вы сможете прямо из админ-панели wordpress. Перейдите по вкладке: ПлагиныДобавить новый, введите название плагина в форму поиска, нажмите Enter, установите и активируйте плагин.

 

13-02-2016 15-48-45

 

После установки и активации плагина, перейдите на страницу: Image Zoooom, чтобы настроить плагин.

 

Zoom Settings

Step 1:Choose the Lens Shape, здесь можно выбрать форму линзы, которая перемещается по изображению.

– Step 2:Check your configuration changes on the image, здесь вы сможете наблюдать сделанные изменения.

– Step 3:Make more fine-grained configurations on the zoom, дополнительные настройки.

 

Общие

– Cursor Type, можете выбрать тип курсора.

– Animation Easing Effect, здесь можно задать скорость перемещения линзы, от 0 до 200.

 

Lens

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

– Border Thickness, толщина границы линзы.

– Border Color, цвет границы линзы.

– Fade Time, время затухания в секундах.

– Tint, можно включить оттенок.

– Tint Color, цвет оттенка.

– Tint Opacity, прозрачность оттенка.

 

Zoom Window

– Zoom Window Width, можете указать ширину увеличительного окна.

– Zoom Window Height, можете задать высоту увеличительного окна.

– Distance from the Main Image, расстояние от изображения до увеличительного окна.

– Border Thickness, размер бордюра увеличительного окна.

– Border Color, цвет бордюра увеличительного окна.

– Shadow Thickness, толщина тени.

– Rounded Corners, можно сделать закруглённые углы, если указать, к примеру: 5-10 px.

– Fade Time, можно задать время затухания окна, в секундах.

Сохраните настройки, нажав на кнопку – Save Changes.

 

13-02-2016 18-05-35_mini

 

Далее, перейдите на страницу: General Settings, чтобы настроить генеральные настройки.

 

– Enable the zoom on WooCommerce products, поставьте галочку, если вы используете плагин WooCommerce.

– Enable the zoom on mobile devices, включение зума на мобильных устройствах.

– Force it to work on WooCommerce, ставьте галочку, чтобы функция зума работала на woocommerce.

– Compatible with LazyLoad (unveil.js), ставьте галочку для совместимости с функцией Lazy Load.

Сохраните настройки.

 

13-02-2016 19-09-08

 

Если вы используете плагин WooCommerce, то функция зума автоматически применится к изображениям ваших товаров. Если вы хотите использовать увеличительное стекло в обычных записях и на страницах, то перейдите на страницу редактирования записи или страницы. В меню визуального редактора, у вас появится специальная кнопка, для включения функции зум. Добавьте на страницу изображение, выделите изображение и нажмите на кнопку zooom, обновите запись.

 

13-02-2016 19-21-53_mini

 

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

 

13-02-2016 19-26-17_mini

 

Для изображений товаров в woocommerce, увеличительное окно будет отображаться автоматически.

 

Остались вопросы? Напиши комментарий! Удачи!

 

info-effect.ru
Добавить комментарий

Имя и Email указывать не обязательно. Чтобы получить ответ на свою электронную почту, укажите свой Email.

  1. Олег

    установил этот плагин, посмотрел не понравилось, удалил и после этого пропал штатный слайдер в карточке товара! как все вернуть обратно !!! помогите

    Ответить
    1. Admin автор
      Ответить
    2. Admin автор

      Можете ещё снова активировать данный плагин и сначала отключить его в настройках, а только потом удалять.

      Ответить
  2. Светлана

    Классно !!!! Красиво и неожиданно получается !!!

    Ответить