Скриншоты
Технические данные
- Опубликовано:
- 09.02.2026
- Обновлено:
- 26.09.2026
- Версия:
- 1.2.4
- Установлено:
- Менее 50 раз
- Подходящие редакции:
- «Первый сайт», «Старт», «Стандарт», «Малый бизнес», «Бизнес», «Корпоративный портал», «Энтерпрайз», «Интернет-магазин + CRM»
- Адаптивность:
- Да
- Поддержка Композита:
- Да
- Совместимо с Сайты24
- Нет
Готовое решение для 1С-Битрикс, позволяющее разместить на сайте интерактивные блоки сравнения двух изображений (“Before/After”). Решение подходит для демонстрации результатов работы и наглядных изменений: ремонт и интерьер, авто, бьюти-услуги, ретушь, медицина, клининг, производство и др.
Основные возможности- Интерактивное сравнение “До/После” с управлением ползунком
- Два режима отображения:
- Overlay (перетаскивание по изображению)
- Bar (ползунок под изображением)
- Overlay (перетаскивание по изображению)
- Вывод нескольких наборов сравнения с переключением через иконки-табы
- Вывод одного набора сравнения в ручном режиме (без инфоблока)
- Настраиваемые элементы интерфейса:
- заголовок блока
- подпись (label)
- бейджи “До/После” и их тексты
- логотип в элементе управления
- позиция, размер и отступы иконок вкладок
- адаптивное поведение на мобильных устройствах
- заголовок блока
- Ресайз изображений по пресетам или произвольно, управление качеством WebP (при наличии поддержки на сервере)
- Компонент из инфоблока — для портфолио/галереи “До/После”, когда нужно выводить множество примеров и переключаться между ними.
- Компонент ручного набора — для лендингов и страниц услуг, где нужен один конкретный пример сравнения.
- Наглядная демонстрация результата повышает вовлечённость и доверие
- Гибкая настройка внешнего вида и поведения
- Возможность централизованно управлять настройками и при необходимости переопределять их на уровне конкретной страницы
| 1.2.4 (26.09.2026) |
|
Установка
Настройка “вручную” (одна пара изображений)
Полезное правило
- Установите модуль стандартным способом (через админку Битрикс / Маркетплейс).
- В мастере установки можно включить демо-данные — они создадут тестовый инфоблок и примеры “До/После” для быстрой проверки.
После установки в административной части появится меню модуля, а в списке компонентов станут доступны:
- sendev:compare.beforeafter
- sendev:compare.beforeafter.manual
Откройте настройки модуля в админке и задайте значения “по умолчанию”, которые будут применяться ко всем вставкам компонентов (если не переопределены в параметрах компонента):
- заголовок/label, бейджи “До/После”
- режим (overlay/bar) и стартовая позиция
- логотип (по умолчанию)
- цвета и толщина разделителя
- параметры иконок и поведение на мобильных
- ресайз изображений и качество WebP (при наличии поддержки на сервере)
- Создайте инфоблок (или используйте демо).
- Добавьте элементы “До/После”, загрузите изображения До и После.
- Разместите компонент sendev:compare.beforeafter на странице и укажите инфоблок.
- Если элементов больше одного — компонент автоматически отобразит иконки-табы для переключения наборов.
<?php $APPLICATION->IncludeComponent( "sendev:compare.beforeafter", ".default", [ "IBLOCK_TYPE" => "content", "IBLOCK_ID" => 12, "NEWS_COUNT" => "20", "CACHE_TYPE" => "A", "CACHE_TIME" => "36000000", ] ); |
Настройка “вручную” (одна пара изображений)
Если инфоблок не нужен, используйте sendev:compare.beforeafter.manual:
- Укажите MANUAL_BEFORE и MANUAL_AFTER (ID файла или путь/URL).
- При необходимости задайте подпись, режим, стартовую позицию, логотип.
<?php $APPLICATION->IncludeComponent( "sendev:compare.beforeafter.manual", ".default", [ "MANUAL_BEFORE" => "/upload/before.jpg", "MANUAL_AFTER" => "/upload/after.jpg", "CACHE_TYPE" => "A", "CACHE_TIME" => "36000000", ] ); |
Полезное правило
Параметры компонента всегда важнее глобальных настроек модуля.
Это удобно, когда на разных страницах нужно разное оформление при общих дефолтах.