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

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

• Интерактивное сравнение “До/После” с управлением ползунком
  
• Два режима отображения:
  • Overlay (перетаскивание по изображению)
    
  • Bar (ползунок под изображением)
    
• Вывод нескольких наборов сравнения с переключением через иконки-табы
  
• Вывод одного набора сравнения в ручном режиме (без инфоблока)
  
• Настраиваемые элементы интерфейса:
  • заголовок блока
    
  • подпись (label)
    
  • бейджи “До/После” и их тексты
    
  • логотип в элементе управления
    
  • позиция, размер и отступы иконок вкладок
    
  • адаптивное поведение на мобильных устройствах
    
• Ресайз изображений по пресетам или произвольно, управление качеством WebP (при наличии поддержки на сервере)
  

• Компонент из инфоблока — для портфолио/галереи “До/После”, когда нужно выводить множество примеров и переключаться между ними.
  
• Компонент ручного набора — для лендингов и страниц услуг, где нужен один конкретный пример сравнения.
  

• Наглядная демонстрация результата повышает вовлечённость и доверие
  
• Гибкая настройка внешнего вида и поведения
  
• Возможность централизованно управлять настройками и при необходимости переопределять их на уровне конкретной страницы
  

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",
  ]
);

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

• Техническая поддержка решения осуществляется через специальный раздел по адресу https://sendev.ru/forum/forum5/
  
• Вы можете проконсультироваться по приобретению решения по e-mail support@sendev.ru и через сайт https://sendev.ru/contacts/