Частая проблема интернет-магазинов на 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 день. Получите консультацию по настройке лупы для вашего каталога. Свяжитесь с нами для консультации и точных сроков. Закажите настройку лупы сейчас. Стоимость рассчитывается индивидуально.