Готовое решение для 1С-Битрикс, позволяющее разместить на сайте интерактивные блоки сравнения двух изображений (“Before/After”). Решение подходит для демонстрации результатов работы и наглядных изменений: ремонт и интерьер, авто, бьюти-услуги, ретушь, медицина, клининг, производство и др.
Основные возможности
- Интерактивное сравнение “До/После” с управлением ползунком
- Два режима отображения:
- Overlay (перетаскивание по изображению)
- Bar (ползунок под изображением)
- Вывод нескольких наборов сравнения с переключением через иконки-табы
- Вывод одного набора сравнения в ручном режиме (без инфоблока)
- Настраиваемые элементы интерфейса:
- заголовок блока
- подпись (label)
- бейджи “До/После” и их тексты
- логотип в элементе управления
- позиция, размер и отступы иконок вкладок
- адаптивное поведение на мобильных устройствах
- Ресайз изображений по пресетам или произвольно, управление качеством WebP (при наличии поддержки на сервере)
Способы использования
- Компонент из инфоблока — для портфолио/галереи “До/После”, когда нужно выводить множество примеров и переключаться между ними.
- Компонент ручного набора — для лендингов и страниц услуг, где нужен один конкретный пример сравнения.
Преимущества внедрения
- Наглядная демонстрация результата повышает вовлечённость и доверие
- Гибкая настройка внешнего вида и поведения
- Возможность централизованно управлять настройками и при необходимости переопределять их на уровне конкретной страницы
Установка
- Установите модуль стандартным способом (через админку Битрикс / Маркетплейс).
- В мастере установки можно включить демо-данные — они создадут тестовый инфоблок и примеры “До/После” для быстрой проверки.
После установки в административной части появится меню модуля, а в списке компонентов станут доступны:
- 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",
]
); |
Полезное правило
Параметры компонента всегда важнее глобальных настроек модуля.
Это удобно, когда на разных страницах нужно разное оформление при общих дефолтах.
