Configuring Magnifier for Product Images in 1C-Bitrix

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.

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.element component: 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.

What Professional 1C-Bitrix Installation Includes

We start by checking innodb_buffer_pool_size. The default MySQL value (128 MB) is a death sentence for an online store with a catalog of 10,000+ items. We set 70–80% of available RAM on a dedicated server, 50% on VPS. This single setting speeds up the site by 2–3 times compared to the default. We'll assess your project in one day — get a consultation. Contact us to order turnkey installation with performance guarantee.

How to Choose Hosting and Edition for 1C-Bitrix Installation?

BitrixVM is a virtual machine with a pre-installed stack: nginx + Apache, PHP-FPM, MySQL/MariaDB, Sphinx, Push server. For VPS — the best start. Everything is already configured for Bitrix, including OPcache, log rotation, and firewall. Management via web panel on port 8890. Bitrix documentation recommends starting with BitrixVM for predictable performance.

VPS/VDS is the sweet spot. Minimum configuration for a medium online store: 2 vCPU, 4 GB RAM, SSD. Optimal: 4 vCPU, 8 GB RAM. OS: Ubuntu 22.04 or Debian 12. If not BitrixVM, we configure the stack manually for the task. Virtual hosting — only for business cards and landing pages. Requirements: PHP 8.0+, MySQL 5.7+ / MariaDB 10.0+, 512 MB RAM, .htaccess. 1C-Bitrix hosting partners guarantee compatibility. Dedicated server — for highload. Typical architecture: web server separate, database separate, Redis/Memcached separate. For Enterprise edition — web cluster with load balancer. Cloud (Yandex Cloud, VK Cloud, Selectel) — when load spikes: sales, seasonal peaks. Autoscaling via Managed Kubernetes or simple VM vertical scaling.

Choosing the edition is equally important. A common mistake: choosing "Small Business" for a store that grows to B2B with wholesale prices and three warehouses in six months. Upgrading to "Business" — pay the difference, data is not lost, but it's better to plan ahead. Our specialists select the edition for current tasks and with room for growth. For example, the "Business" license (about 35,000 RUB) pays off through multi-warehouse and 1C exchange, while the wrong choice can lead to a loss of up to 30,000 RUB monthly on excess resources.

What Server Settings Are Critical for 1C-Bitrix?

Web Server and PHP

nginx as reverse proxy + Apache (mod_php) or nginx + PHP-FPM directly. The second option saves memory — Apache is not needed. But some Bitrix modules use .htaccess, so for compatibility we sometimes keep Apache. nginx configuration: fastcgi_read_timeout 300 — for long operations (1C import), client_max_body_size 1024m — large file uploads. Block access to .settings.php, .settings_extra.php, bitrix/.settings.php — they contain database passwords. Rewrite rules from urlrewrite.php — Bitrix generates them, but with nginx + PHP-FPM they need to be duplicated. PHP 8.0–8.2 with extensions: mbstring, curl, gd, xml, json, opcache, redis/memcached. Key php.ini settings: opcache.memory_consumption=256, opcache.max_accelerated_files=20000, max_execution_time=300, memory_limit=512M, upload_max_filesize=100M, post_max_size=128M.

Database and Caching

MySQL/MariaDB. Key my.cnf parameters: innodb_buffer_pool_size — 70–80% RAM, innodb_log_file_size=256M, tmp_table_size=256M, max_heap_table_size=256M, thread_pool_size — number of CPU cores. Encoding utf8mb4 mandatory, otherwise emoji and special characters break. Redis is preferable to Memcached for Bitrix — supports persistent connections and is more reliable. In production, Redis handles concurrent writes three times faster than Memcached under typical load. Configure in .settings_extra.php:

'cache' => ['value' => ['type' => ['class_name' => '\\Bitrix\\Main\\Data\\CacheEngineRedis']]]
'session' => ['value' => ['mode' => 'default', 'handlers' => ['general' => ['type' => 'redis']]]]

sudo apt install redis-server
sudo systemctl enable redis

SSL, Email, and Cron

SSL — Let's Encrypt via certbot in 90% of cases. Redirect HTTP → HTTPS (301), HSTS, TLS 1.2/1.3, OCSP Stapling. In Bitrix, switch to HTTPS in the main module settings. Email: abandon mail() — connect SMTP (Yandex.Mail for domain, Mail.ru for Business). Be sure to configure SPF, DKIM, DMARC. Without SPF, emails go to spam. Test deliverability via mail-tester.com — score 9+/10. Cron: Bitrix agents switch to system cron — * * * * * /usr/bin/php /var/www/bitrix/modules/main/tools/cron_events.php. Schedule 1C exchange (15–60 min), search reindex, backups (mysqldump + rsync, rotation 7+4), temporary file cleanup.

Security and Administration

File system: owner www-data, directories 755, files 644, upload 775. nginx blocks access to configuration files. Enable Bitrix Proactive Protection — WAF, activity control (block after 5 failed attempts), kernel integrity check. For admin panel: two-factor authentication via Google Authenticator or OTP, restrict access by IP via nginx for paranoid.

How Long Does 1C-Bitrix Installation and Configuration Take?

Post-Installation Checklist

1. Performance Monitor (/bitrix/admin/perfmon_panel.php) — aim for 30+ points. Below 20 means serious configuration issues.
2. System Check — automatic check of all parameters. Red items must be fixed, yellow — case by case.
3. Security Scanner — check for typical vulnerabilities.
4. PageSpeed Insights — TTFB < 200ms on VPS, LCP < 2.5s.
5. Test 1C exchange — if integration is planned, verify CommerceML exchange before launch.

Additionally, check software versions, caching settings, cron operation, SSL certificate, SPF/DKIM/DMARC, access rights, delete default users and pages. For projects with 54-FZ, ensure fiscalization is configured via OFD provider.

Deliverables

• Fully configured server for 1C-Bitrix with MySQL, PHP, nginx optimization.
• Installed and activated license of the required edition.
• SSL certificate, email settings, cron and backups.
• Documentation: all configuration parameters, access credentials, cron tasks.
• Content manager training: how to log into admin panel, add products, upload images.
• Post-installation support for 30 days — consultations on settings.

Why Trust Professionals with Installation?

Incorrect installation means lost time and money. We've seen projects where a store on "Start" couldn't handle 50 visitors because innodb_buffer_pool_size wasn't configured. After migrating to VPS with correct configuration, the site "flew". Incorrect configuration can cost 30,000 RUB monthly due to excessive resource consumption. You get a ready-made architecture that scales. Order turnkey 1C-Bitrix installation — get a reliable platform for business growth. Contact us for a free consultation: we'll calculate the cost and time for your project. Over 7 years of experience, 120+ Bitrix projects implemented, including highload stores with million-item catalogs. Get in touch — we'll help configure Bitrix for your project.