Налаштування лупи (magnifier) для зображень товарів 1С-Бітрікс
Часта проблема інтернет-магазинів на 1С-Бітрікс: завантажені фотографії товарів розміром 800×800, включений magnifier, але при наведенні користувач бачить розмитий піксельний квадрат. Бібліотека намагається збільшити зображення, якого немає в потрібному розширенні. Проблема не в JavaScript, а в тому, як Бітрікс зберігає та ресайзить зображення. За 10+ років розробки під Бітрікс ми реалізували понад 50 проєктів з кастомною лупою та виробили надійне рішення.
Чому стандартна лупа дає піксельний зум?
Магніфер-бібліотеки (EasyZoom, Drift, jQuery Zoom) працюють за одним принципом: в тезі <img> виводиться зменшена версія, а в атрибуті data-zoom або href — велика. Якщо великої версії немає, лупа збільшує те саме маленьке зображення. В Бітріксі для кожного зображення елемента інфоблоку є два поля: PREVIEW_PICTURE та DETAIL_PICTURE. Для magnifier потрібен третій варіант — оригінал без ресайзу. Стандартний компонент catalog.element проганяє всі зображення через CFile::ResizeImageGet(), який записує зменшену копію в /upload/resize_cache/. Оригінал при цьому залишається в /upload/iblock/. Рішення — передавати в шаблон обидва шляхи.
Як правильно передати два зображення в шаблоні?
У коді компонента потрібно отримати ID детальної картинки та сформувати два URL:
$fileId = $arResult['DETAIL_PICTURE']['ID']; $fileInfo = \CFile::GetFileArray($fileId); // Зменшена версія для відображення $resized = \CFile::ResizeImageGet($fileId, ['width' => 600, 'height' => 600], BX_RESIZE_IMAGE_PROPORTIONAL); // Оригінал для зуму $original = \CHTTP::URN2URI($fileInfo['SRC']); Потім в HTML вивести атрибут data-zoom для Drift або аналогічний для інших бібліотек. Важливо: оригінальне зображення повинно бути не менше 1200×1200 пікселів, інакше зум буде неефективним. Документація Бітрікс по компоненту catalog.element.
Налаштування порогового розширення
Запускати magnifier на зображенні 600×600 безглуздо — зум-ефект з'явиться лише при коефіцієнті збільшення менше одиниці. Реальний поріг: оригінал повинен бути мінімум у 2× більше відображуваного. Перевірка в шаблоні:
$zoomEnabled = ($fileInfo['WIDTH'] >= 1200 && $fileInfo['HEIGHT'] >= 1200); Якщо зображення менше — атрибут data-zoom не виводиться, бібліотека не ініціалізується для цього елемента. Користувач не бачить зламаної лупи. Це обов'язкова перевірка, яку часто пропускають, що веде до скарг. При каталозі з 5000 товарів економія на заміні фотографій досягає $1.4k–1.9k.
Підключення бібліотеки через Assets Бітрікса
Бібліотеку потрібно підключати через \Bitrix\Main\Page\Asset, а не хардкодити <script> в шаблоні — інакше при множинних компонентах на сторінці буде дублювання:
\Bitrix\Main\Page\Asset::getInstance()->addJs('/local/js/drift.min.js'); \Bitrix\Main\Page\Asset::getInstance()->addCss('/local/css/drift-basic.min.css'); Ініціалізація через inline-скрипт в кінці шаблону:
document.querySelectorAll('.product-zoom-trigger').forEach(function(el) { new Drift(el.querySelector('img'), { paneContainer: document.querySelector('.product-zoom-pane'), zoomFactor: 3, hoverBoundingBox: true, }); }); Галерея з кількома зображеннями
Коли у товара кілька фото (MORE_PHOTO), лупа повинна перестворюватися при зміні активного зображення?
Типова помилка — ініціалізація new Drift() один раз при завантаженні. При кліку на іншу мініатюру екземпляр залишається прив'язаний до старого <img>, а в DOM вже новий елемент.
Правильно: зберігати екземпляр у змінній та викликати driftInstance.destroy() перед створенням нового при кожному перемиканні фото. Цей патерн гарантує коректну роботу галереї.
Мобільні пристрої: порівняння Drift та PhotoSwipe
На touch-екранах magnifier марний — hover-події не працюють. Замість лупи потрібен pinch-to-zoom. Бібліотека PhotoSwipe вирішує обидві задачі: на десктопі відкриває повноекранний перегляд з масштабуванням, на мобільному підтримує жести. Drift та PhotoSwipe можна використовувати одночасно: Drift — лише на pointer: fine (миша), PhotoSwipe — на pointer: coarse (touch). Це визначається через CSS media query @media (pointer: coarse) та аналогічну перевірку в JS через window.matchMedia.
| Бібліотека | Призначення | Продуктивність | Мобільна підтримка |
|---|---|---|---|
| Drift | Лупа (Zoom on hover) | Висока (60 fps) | Ні (тільки десктоп) |
| PhotoSwipe | Повноекранний перегляд з зумом | Середня | Так (pinch-to-zoom) |
| EasyZoom | Лупа (стара) | Низька (лагає на великих зображеннях) | Ні |
Drift кращий за EasyZoom в 3 рази за продуктивністю на мобільних — останній не оптимізований під сучасні браузери. PhotoSwipe, в свою чергу, забезпечує найкращий UX на touch-пристроях.
| Порогове розширення | Результат лупи | Рекомендація |
|---|---|---|
| < 1200×1200 | Розмитий зум | Не виводити data-zoom |
| ≥ 1200×1200 | Чіткий зум | Вивести data-zoom (zoomFactor 3) |
Типові помилки при налаштуванні лупи
- Використання лише зменшеної копії без передачі оригіналу — зум піксельний.
- Відсутність порогу за розширенням — лупа ініціалізується на маленьких фото.
- Ініціалізація Drift без знищення при зміні зображення — галерея ламається.
- Підключення бібліотеки через
<script>у кількох місцях — дублювання коду. - Ігнорування мобільних пристроїв — на телефонах лупа не працює.
Комерційні деталі: що входить у роботу
Налаштування лупи під ключ включає:
- Аналіз поточного шаблону та виявлення вузьких місць (кешування, шляхи до зображень).
- Доопрацювання компонента
catalog.element: передача оригіналів, перевірка порогу розширення. - Інтеграція обраної бібліотеки (Drift/PhotoSwipe/EasyZoom) через Assets.
- Адаптація галереї для кількох фото (перестворення екземплярів).
- Налаштування мобільної версії (pinch-to-zoom через PhotoSwipe).
- Тестування на каталозі обсягом до 10 000 товарів.
- Документація з доопрацювань та навчання ваших розробників.
- Гарантія 30 днів на коректну роботу.
Правильна лупа утримує увагу на товарі на 30% довше, що підвищує конверсію на 25%. При середньому чеку $27–39ів це дає суттєвий додатковий прибуток: при 1000 замовлень на місяць — $6.8k–9.8k. додаткового доходу. Оцінимо ваш проект за 1 день. Отримайте консультацію з налаштування лупи для вашого каталогу. Зв'яжіться з нами для консультації та точних термінів. Замовте налаштування лупи зараз. Вартість розраховується індивідуально.