Увеличение фотографии с помощью функции "Лупа"

В статье рассмотрим как работает лупа - увеличение фотографии товара.

Функционал "лупа" задается автоматически в коде сайта. И напрямую зависит от ранее загруженной исходной фотографии.

То есть, если изначально фотография товара была небольшого размера, лупа не сможет сильно увеличить фотографию (рис.1). А если фотография была достаточно хорошего качества и большого размера, то с помощью лупы можно будет рассмотреть мелкие части фотографии (рис.2).

Для рисунка 1 загружена фотография размера: 426 x 640 px

Рисунок 1.

Для рисунка 2 загружена фотография размера: 1280 x 1920 px

Рисунок 2.

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

Изменить размер области увеличения можно, для этого необходимо перейти в панель администрирования "Интернет-магазин - Параметры магазина", вкладка "Категория товаров", раздел "Размер изображения" и изменить размеры средней фотографии (рис.3).

Рисунок 3.

Таким образом изменится область увеличения (рис.4).

Рисунок 4.

Внимание

Если изменили размер средней фотографии, то новые загруженные фотографии будут отображаться по новым размерам, а старые изображения, загруженные ранее останутся прежние. Чтобы этого не произошло и все фотографии отображались одинаково, после изменения размеров изображений необходимо пережать фотографии. Для этого перейдите в "Интернет-магазин - Параметры магазина", вкладка "Категория товаров", раздел "Размер изображения" и нажмите "Пережать фотографии товаров" (рис.5).

Рисунок 5.

Заметка

В мобильной версии лупа не предусмотрена.

Если хотите отключить функцию увеличения, перейдите в пункт меню "Интернет-магазин - Параметры магазина", вкладка "Карточка товара", в поле "Увеличивать фотографию при наведении курсора" снимите галочку (рис.6).

Рисунок 6.

Готово, мы рассмотрели как работает увеличение фотографии товаров с функцией "лупа".