Увеличение фото товара в Tilda: линза и просмотр на телефоне

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

Мод «Детальный zoom изображения» добавляет несколько способов просмотра. На компьютере можно использовать линзу, а на телефоне — открыть фотографию крупно. Разберём, как выбрать режим и не получить вместо деталей размытые пиксели.

Для одежды это ткань, швы и застёжки; для украшений — крепления и поверхность металла; для мебели — фактура, соединения и фурнитура. Подготовьте снимки, на которых эти детали действительно видны. Одна фотография издалека редко отвечает на все вопросы.

Посмотрите на фото в исходном размере. Если важное место уже нечёткое, линза не исправит съёмку. В таком случае полезнее сначала добавить отдельный крупный план, а уже потом настраивать увеличение.

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

Начните с одного товара и понятного источника. Проверьте, что выбирается главное фото, а после смены слайда — новое. Не применяйте увеличение сразу ко всем картинкам сайта: иконки, логотипы и декоративные элементы обычно не требуют линзы.

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

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

На сенсорном экране нет наведения мышью, поэтому поведение задаётся отдельно. Выберите предусмотренный touch-режим: полный экран, двойное касание или отключение. Не рассчитывайте, что настольная линза автоматически станет удобной для пальцев.

В крупном просмотре проверьте перемещение по фото, понятную кнопку закрытия и возвращение к товару. Попробуйте обычную прокрутку страницы до открытия. Нежелательно, чтобы случайное касание изображения каждый раз прерывало чтение.

1. Подготовьте фотографии и проверьте их переключение без модификации.
2. В конструкторе выберите область, изображения и режим компьютера.
3. Отдельно настройте телефон, кратность и подпись закрытия.
4. Скопируйте код в T123 после блока товара и опубликуйте страницу.
5. Проверьте первое и последнее фото, смену слайда, открытие и закрытие увеличения.

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

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

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

Читайте также: Сравнение товаров в Tilda: как сделать удобную таблицу · Табы в Tilda: вкладки и таблица характеристик товара.