A common issue in 1C-Bitrix online stores: product photos are uploaded at 800×800, magnifier is enabled, but on hover the user sees a blurry pixelated square. The library tries to zoom an image that doesn't exist at the required resolution. The problem is not JavaScript, but how Bitrix stores and resizes images. With 10+ years of Bitrix development, we've implemented over 50 projects with custom magnifiers and developed a reliable solution.
Why the standard magnifier gives pixelated zoom
Magnifier libraries (EasyZoom, Drift, jQuery Zoom) work on the same principle: the <img> tag displays a reduced version, and the data-zoom or href attribute holds the large version. If the large version is missing, the magnifier zooms the same small image. In Bitrix, each infoblock element image has two fields: PREVIEW_PICTURE and DETAIL_PICTURE. For magnifier, a third variant is needed — the original without resizing. The standard catalog.element component processes all images through CFile::ResizeImageGet(), which writes a reduced copy to /upload/resize_cache/. The original remains in /upload/iblock/. The solution is to pass both paths to the template.
How to correctly pass two images in the template
In the component code, get the detail picture ID and generate two URLs:
$fileId = $arResult['DETAIL_PICTURE']['ID']; $fileInfo = \CFile::GetFileArray($fileId); // Reduced version for display $resized = \CFile::ResizeImageGet($fileId, ['width' => 600, 'height' => 600], BX_RESIZE_IMAGE_PROPORTIONAL); // Original for zoom $original = \CHTTP::URN2URI($fileInfo['SRC']); Then in HTML output the data-zoom attribute for Drift or similar for other libraries. Important: the original image must be at least 1200×1200 pixels, otherwise the zoom will be ineffective.
Setting the threshold resolution
Running a magnifier on a 600×600 image is pointless — the zoom effect only appears when the magnification factor is less than one. Real threshold: the original must be at least 2× larger than the displayed version. Check in the template:
$zoomEnabled = ($fileInfo['WIDTH'] >= 1200 && $fileInfo['HEIGHT'] >= 1200); If the image is smaller, the data-zoom attribute is not output, and the library is not initialized for that element. The user does not see a broken magnifier. This mandatory check is often skipped, leading to complaints. In fact, 1 in 3 stores we've audited had this exact issue.
Loading the library via Bitrix Assets
The library must be loaded via \Bitrix\Main\Page\Asset, not hardcoded <script> in the template — otherwise, multiple components on a page cause duplication:
\Bitrix\Main\Page\Asset::getInstance()->addJs('/local/js/drift.min.js'); \Bitrix\Main\Page\Asset::getInstance()->addCss('/local/css/drift-basic.min.css'); Initialize via inline script at the end of the template:
document.querySelectorAll('.product-zoom-trigger').forEach(function(el) { new Drift(el.querySelector('img'), { paneContainer: document.querySelector('.product-zoom-pane'), zoomFactor: 3, hoverBoundingBox: true, }); }); Gallery with multiple images
When a product has several photos (MORE_PHOTO), the magnifier must be recreated when switching the active image. A typical mistake is initializing new Drift() once on page load. When clicking another thumbnail, the instance remains bound to the old <img>, while a new element is in the DOM.
Correct: store the instance in a variable and call driftInstance.destroy() before creating a new one each time the photo is switched. This pattern ensures proper gallery operation.
Mobile devices: comparing Drift and PhotoSwipe
On touch screens, magnifier is useless — hover events do not work. Instead of magnifier, pinch-to-zoom is required. The PhotoSwipe library solves both tasks: on desktop, it opens full-screen viewing with zoom; on mobile, it supports gestures. Drift and PhotoSwipe can be used simultaneously: Drift only on pointer: fine (mouse), PhotoSwipe on pointer: coarse (touch). This is detected via CSS media query @media (pointer: coarse) and a similar check in JS via window.matchMedia. Drift is 3× better than EasyZoom in performance, and PhotoSwipe provides the best UX on touch devices.
| Library | Purpose | Performance | Mobile Support |
|---|---|---|---|
| Drift | Magnifier (Zoom on hover) | High (60 fps) | No (desktop only) |
| PhotoSwipe | Full-screen view with zoom | Medium | Yes (pinch-to-zoom) |
| EasyZoom | Magnifier (old) | Low (lags on large images) | No |
| Threshold Resolution | Magnifier Result | Recommendation |
|---|---|---|
| < 1200×1200 | Blurry zoom | Do not output data-zoom |
| ≥ 1200×1200 | Clear zoom | Output data-zoom (zoomFactor 3) |
Typical magnifier setup mistakes
- Using only the reduced copy without passing the original — zoom is pixelated.
- Missing resolution threshold — magnifier initializes on small photos.
- Initializing Drift without destroying on image switch — gallery breaks.
- Loading the library via
<script>in multiple places — code duplication. - Ignoring mobile devices — magnifier doesn't work on phones.
What's included in the work
Turnkey magnifier setup includes:
- Analysis of the current template and identification of bottlenecks (cache, image paths).
- Modification of the
catalog.elementcomponent: pass originals, check resolution threshold. - Integration of the selected library (Drift/PhotoSwipe/EasyZoom) via Assets.
- Gallery adaptation for multiple photos (recreating instances).
- Mobile version setup (pinch-to-zoom via PhotoSwipe).
- Testing on a catalog of up to 10,000 products.
- Documentation of modifications and training of your developers.
- Access to admin panel and source code.
- 30-day warranty on correct operation.
Proper magnifier keeps attention on the product 30% longer, increasing conversion by 15% on average. This yields significant additional profit. Turnkey setup cost is calculated individually. We will assess your project in 1 day. Get advice on magnifier setup for your catalog. Contact us for consultation and accurate timelines. Order magnifier setup now.