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

SenDev: Сравнение изображений До/После — модуль для 1С-Битрикс, который позволяет разместить на сайте интерактивное сравнение двух изображений. Посетитель двигает разделитель и на одном экране видит исходное состояние и результат.

Такой формат подходит для портфолио, ремонта и дизайна интерьеров, косметологии, парикмахерских услуг, реставрации, детейлинга, строительства, обработки фотографий и других задач, где результат удобнее показывать не двумя отдельными картинками, а одним интерактивным блоком.

В модуле предусмотрено два способа вывода:

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

Оба варианта используют одинаковый внешний вид и общие настройки: заголовок, подпись, бейджи «До/После», положение разделителя, режим отображения, логотип на ползунке, обработку изображений, положение иконок и мобильное поведение.

Как строится работа с модулем

1. Установите модуль и при необходимости создайте демонстрационный инфоблок.
2. Откройте глобальные настройки и задайте базовый внешний вид.
3. Выберите способ хранения данных: инфоблок или ручной набор.
4. Подготовьте изображения одинакового сюжета «До» и «После».
5. Добавьте компонент сравнения на страницу.
6. Настройте стартовое положение, режим сравнения и отображение подписей.
7. Проверьте блок на компьютере и мобильном устройстве.

Два режима сравнения

overlay — основной режим. Две картинки лежат одна над другой, а пользователь двигает разделитель прямо по изображению. На разделителе может отображаться круглая ручка с логотипом.

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

Глобальные настройки и настройки компонента

Страница настроек модуля задаёт значения по умолчанию. При этом параметры конкретного компонента имеют приоритет. Это позволяет, например, использовать белый разделитель и нижние иконки на большинстве страниц, а для одного блока задать тёмный разделитель и иконки слева.

Если уже размещённый компонент хранит собственные значения параметров, последующее изменение глобальных настроек может не изменить этот экземпляр автоматически. В таком случае откройте параметры компонента и приведите нужные поля к новым значениям.

Что находится в документации

• установка и удаление модуля;
• быстрый первый запуск;
• работа с демонстрационным инфоблоком;
• подготовка элементов инфоблока;
• настройка компонента из инфоблока;
• настройка ручного компонента;
• описание режимов overlay и bar;
• все глобальные настройки;
• ресайз изображений и WebP;
• иконки, логотип и мобильная версия;
• кэширование и порядок применения настроек;
• решение типовых проблем;
• ручной список обновлений.

Документация соответствует версии 1.0.0.