Каталог решений

Покупка продления купона

Продолжительность:
Общая сумма:
0 руб.
Ваш запрос успешно отправлен!

Я согласен с условиями активации продлений
Продлить
Продолжить покупки

Сравнение изображений До/После

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

Сравнение изображений До/После

Сравнение изображений До/После

Скриншоты
Описание

Технические данные

Опубликовано:
09.02.2026
Версия:
1.0.0
Установлено:
Менее 50 раз
Подходящие редакции:
«Первый сайт», «Старт», «Стандарт», «Малый бизнес», «Бизнес», «Корпоративный портал», «Энтерпрайз», «Интернет-магазин + CRM»
Адаптивность:
Да
Поддержка Композита:
Да
Совместимо с Сайты24
Нет

Пользовательское соглашение

Описание

Готовое решение для 1С-Битрикс, позволяющее разместить на сайте  интерактивные блоки сравнения двух изображений (“Before/After”). Решение  подходит для демонстрации результатов работы и наглядных изменений:  ремонт и интерьер, авто, бьюти-услуги, ретушь, медицина, клининг,  производство и др.

Основные возможности
  • Интерактивное сравнение “До/После” с управлением ползунком
  • Два режима отображения:
    • Overlay (перетаскивание по изображению)
    • Bar (ползунок под изображением)
  • Вывод нескольких наборов сравнения с переключением через иконки-табы
  • Вывод одного набора сравнения в ручном режиме (без инфоблока)
  • Настраиваемые элементы интерфейса:
    • заголовок блока
    • подпись (label)
    • бейджи “До/После” и их тексты
    • логотип в элементе управления
    • позиция, размер и отступы иконок вкладок
    • адаптивное поведение на мобильных устройствах
  • Ресайз изображений по пресетам или произвольно, управление качеством WebP (при наличии поддержки на сервере)
Способы использования
  • Компонент из инфоблока — для портфолио/галереи “До/После”, когда нужно выводить множество примеров и переключаться между ними.
  • Компонент ручного набора — для лендингов и страниц услуг, где нужен один конкретный пример сравнения.
Преимущества внедрения
  • Наглядная демонстрация результата повышает вовлечённость и доверие
  • Гибкая настройка внешнего вида и поведения
  • Возможность централизованно управлять настройками и при необходимости переопределять их на уровне конкретной страницы
Отзывы (0)
Обсуждения (0)
Здесь пока никто ничего не написал. Будьте первым.
Установка
Установка
  1. Установите модуль стандартным способом (через админку Битрикс / Маркетплейс).
  2. В мастере установки можно включить демо-данные — они создадут тестовый инфоблок и примеры “До/После” для быстрой проверки.

После установки в административной части появится меню модуля, а в списке компонентов станут доступны:

  • sendev:compare.beforeafter
  • sendev:compare.beforeafter.manual
Базовая настройка (глобально)

Откройте настройки модуля в админке и задайте значения “по  умолчанию”, которые будут применяться ко всем вставкам компонентов (если  не переопределены в параметрах компонента):

  • заголовок/label, бейджи “До/После”
  • режим (overlay/bar) и стартовая позиция
  • логотип (по умолчанию)
  • цвета и толщина разделителя
  • параметры иконок и поведение на мобильных
  • ресайз изображений и качество WebP (при наличии поддержки на сервере)
Настройка через инфоблок (несколько сравнений + табы)
  1. Создайте инфоблок (или используйте демо).
  2. Добавьте элементы “До/После”, загрузите изображения До и После.
  3. Разместите компонент sendev:compare.beforeafter на странице и укажите инфоблок.
  4. Если элементов больше одного — компонент автоматически отобразит иконки-табы для переключения наборов.
Минимальная вставка
<?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:

  1. Укажите MANUAL_BEFORE и MANUAL_AFTER (ID файла или путь/URL).
  2. При необходимости задайте подпись, режим, стартовую позицию, логотип.
Минимальная вставка
<?php
$APPLICATION->IncludeComponent(
  "sendev:compare.beforeafter.manual",
  ".default",
  [
    "MANUAL_BEFORE" => "/upload/before.jpg",
    "MANUAL_AFTER"  => "/upload/after.jpg",

    "CACHE_TYPE" => "A",
    "CACHE_TIME" => "36000000",
  ]
);

Полезное правило

Параметры компонента всегда важнее глобальных настроек модуля.
Это удобно, когда на разных страницах нужно разное оформление при общих дефолтах.

Поддержка
Техническая поддержка

Другие решения разработчика

Решение добавлено в корзину

Перейдите в корзину и оформите заказ или продолжите покупки
Перейти в корзину
Продолжить покупки