Image Comparison

Name: MSG Image Comparison Element
Author: MSGru

Сравнивайте изображения до и после или показывайте два варианта одного объекта. Настройте направление и управление в YOOtheme Pro, добавьте подписи и контент поверх изображений.

Joomla! 6

YOOtheme Pro 5

PHP 8

Скачать бесплатно

Поддержка

Покажите разницу в деталях

Сопоставьте два состояния одного объекта в общей области. Посетитель передвигает границу и видит, что изменилось: от отделки комнаты до обработки фотографии.

Сравнение интерьера до и после отделки с подвижной границей

До и после — или два варианта

Подберите пару изображений с одинаковым ракурсом. Подписи можно изменить под задачу: показать результат работы, обработку фотографии или варианты отделки.

Цвет и свет в портрете

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

Исходник

Обработка

Цветокоррекция

Дуб

Орех

Два материала

Два материала одного предмета

Покажите один предмет в разных отделках: например, светлый дуб и тёмный орех. Замените подписи «До» и «После» названиями материалов.

Передвиньте границу сравнения

Потяните разделитель или нажмите на изображение. Для управления с клавиатуры выберите разделитель клавишей Tab, затем используйте стрелки, Home и End.

До отделки

После отделки

Демонстрационный интерьер

Изображения созданы для демонстрации. Направление — горизонтальное; начальная позиция — 50%.

Настройки элемента

Параметры сгруппированы так же, как в Builder. Откройте нужный раздел, чтобы посмотреть значения по умолчанию, диапазоны и условия работы.

Контент

Два источника изображений и один общий fragment. Изображения, alt и подписи поддерживают dynamic sources.

До	По умолчанию: не заполнено. Поддерживает динамический источник.
Альтернативный текст	По умолчанию: не заполнено. Поддерживает динамический источник.
Подпись	По умолчанию: До. Поддерживает динамический источник.
Фокусная точка	По умолчанию: center-center. Значения: Сверху слева (top-left); Сверху по центру (top-center); Сверху справа (top-right); По центру слева (center-left); По центру (center-center); По центру справа (center-right); Снизу слева (bottom-left); Снизу по центру (bottom-center); Снизу справа (bottom-right).
После	По умолчанию: не заполнено. Поддерживает динамический источник.
Альтернативный текст	По умолчанию: не заполнено. Поддерживает динамический источник.
Подпись	По умолчанию: После. Поддерживает динамический источник.
Фокусная точка	По умолчанию: center-center. Значения: Сверху слева (top-left); Сверху по центру (top-center); Сверху справа (top-right); По центру слева (center-left); По центру (center-center); По центру справа (center-right); Снизу слева (bottom-left); Снизу по центру (bottom-center); Снизу справа (bottom-right).
Контент overlay	По умолчанию: пустой fragment.

Сравнение

Горизонтальное направление перемещает вертикальную границу слева направо; вертикальное — горизонтальную границу сверху вниз.

Направление	По умолчанию: horizontal. Значения: Горизонтальное (horizontal); Вертикальное (vertical).
Начальная позиция (%)	По умолчанию: 50. Диапазон: 0–100.
Тема управления	По умолчанию: inherit. Значения: Из секции (inherit); Светлый фон (light); Тёмный фон (dark).
Толщина разделителя (px)	По умолчанию: 2. Диапазон: 1–20.
Размер кнопки (px)	По умолчанию: 48. Диапазон: 44–100.
Скругление (px)	По умолчанию: 12. Диапазон: 0–100.

Взаимодействие

Режимы указателя включаются независимо. Hover плавно сближается с курсором при входе, затем следует без задержки. Клавиатура остаётся доступной при любом сочетании этих режимов.

Перетаскивание / свайп	По умолчанию: включено.
Клик / касание	По умолчанию: включено.
Следовать за мышью	По умолчанию: выключено.
Сближение при входе (мс)	По умолчанию: 160. Диапазон: 0–1000. Доступно при включённой настройке «Следовать за мышью».
Возврат из крайних положений	По умолчанию: включено.
Отступ от края (%)	По умолчанию: 10. Диапазон: 1–49. Доступно при включённой настройке «Возврат из крайних положений».
Возврат при уходе мыши	По умолчанию: выключено.
Длительность возврата (мс)	По умолчанию: 350. Диапазон: 0–60000.
Плавность движения	По умолчанию: ease-out. Значения: Линейная (linear); Ускорение (ease-in); Замедление (ease-out); Ускорение и замедление (ease-in-out).
Анимация кнопки при нажатии	По умолчанию: включено.

Изображения

Высота телефона действует по умолчанию, планшета — от 640 px, компьютера — от 960 px. Ноль возвращает пропорции либо наследование. Ширина генерируемых копий не задаёт ширину блока на странице.

Пропорции	По умолчанию: 16 / 9. Значения: 16:9 (16 / 9); 4:3 (4 / 3); 3:2 (3 / 2); 1:1 (1 / 1); 3:4 (3 / 4).
Высота на телефоне (0 = пропорции)	По умолчанию: 0. Диапазон: 0–2000.
Высота на планшете (0 = наследовать)	По умолчанию: 0. Диапазон: 0–2000.
Высота на компьютере (0 = наследовать)	По умолчанию: 0. Диапазон: 0–2000.
Ширина генерируемых изображений (px)	По умолчанию: 1600. Диапазон: 1–8000.
Заполнение	По умолчанию: cover. Значения: Заполнить (cover); Вместить (contain).
Фон изображений	По умолчанию: #e7e9ec.
Загрузка изображений	По умолчанию: lazy. Значения: Отложенная (lazy); Сразу (eager).

Подписи

Текст подписей задаётся отдельно для сторон во вкладке «Контент».

Показывать подписи	По умолчанию: включено.
Положение подписей	По умолчанию: top. Значения: Сверху / противоположные края (top); По центру (center); Снизу (bottom).

Overlay

Цветовой слой и Builder fragment настраиваются отдельно. Не размещайте важную кнопку fragment под кнопкой разделителя.

Включить overlay	По умолчанию: выключено.
Тип overlay	По умолчанию: solid. Значения: Заливка (solid); Градиент снизу (gradient). Доступно при включённой настройке «Включить overlay».
Цвет overlay	По умолчанию: #000000. Доступно при включённой настройке «Включить overlay».
Непрозрачность overlay (%)	По умолчанию: 25. Диапазон: 0–100. Доступно при включённой настройке «Включить overlay».
Видимость overlay	По умолчанию: always. Значения: Всегда (always); Наведение / фокус (interaction). Доступно при включённой настройке «Включить overlay».
По вертикали	По умолчанию: flex-end. Значения: Сверху (flex-start); По центру (center); Снизу (flex-end).
По горизонтали	По умолчанию: flex-start. Значения: Слева (flex-start); По центру (center); Справа (flex-end).
Отступ контента (px)	По умолчанию: 24. Диапазон: 0–150.
Максимальная ширина контента (%)	По умолчанию: 80. Диапазон: 10–100.

Появление

Однократный проход к начальной позиции. Reduced motion отключает автоматические анимации.

Анимация появления	По умолчанию: выключено.
Начало появления (%)	По умолчанию: 0. Диапазон: 0–100. Доступно при включённой настройке «Анимация появления».
Длительность появления (мс)	По умолчанию: 800. Диапазон: 1–60000. Доступно при включённой настройке «Анимация появления».
Задержка появления (мс)	По умолчанию: 0. Диапазон: 0–3600000. Доступно при включённой настройке «Анимация появления».

Внимание

Подсказка кратко сдвигает всю границу сравнения. Амплитуда измеряется в пикселях.

Анимация привлечения внимания	По умолчанию: выключено.
Амплитуда (px)	По умолчанию: 8. Диапазон: 0–24. Доступно при включённой настройке «Анимация привлечения внимания».
Длительность подсказки (мс)	По умолчанию: 700. Диапазон: 1–60000. Доступно при включённой настройке «Анимация привлечения внимания».
Задержка подсказки (мс)	По умолчанию: 1500. Диапазон: 0–3600000. Доступно при включённой настройке «Анимация привлечения внимания».
Число повторений	По умолчанию: 1. Диапазон: 1–100. Доступно при включённой настройке «Анимация привлечения внимания».
Интервал повторений (мс)	По умолчанию: 4000. Диапазон: 0–3600000. Доступно при включённой настройке «Анимация привлечения внимания».

Autoplay

Разделитель проходит диапазон туда и обратно с паузами на концах. Наведение, фокус, взаимодействие, уход из viewport и скрытая вкладка приостанавливают движение. Reduced motion отключает автоматические анимации.

Автовоспроизведение	По умолчанию: выключено.
Начало диапазона (%)	По умолчанию: 0. Диапазон: 0–99. Доступно при включённой настройке «Автовоспроизведение».
Конец диапазона (%)	По умолчанию: 100. Диапазон: 1–100. Доступно при включённой настройке «Автовоспроизведение».
Длительность прохода (мс)	По умолчанию: 3000. Диапазон: 1–60000. Доступно при включённой настройке «Автовоспроизведение».
Пауза в крайних точках (мс)	По умолчанию: 1000. Диапазон: 0–3600000. Доступно при включённой настройке «Автовоспроизведение».
Пауза после взаимодействия (мс)	По умолчанию: 3000. Диапазон: 0–3600000. Доступно при включённой настройке «Автовоспроизведение».

Доступность

Название и инструкция описывают конкретное сравнение для скринридера. Подписи запуска и паузы относятся к кнопке autoplay.

Название для скринридера	По умолчанию: Сравнение изображений.
Инструкция для клавиатуры	По умолчанию: Используйте стрелки для сравнения, Home и End для крайних положений..
Подпись кнопки запуска	По умолчанию: Запустить сравнение.
Подпись кнопки паузы	По умолчанию: Приостановить сравнение.

Общие параметры Builder

Отступы, видимость и вкладка «Дополнительно» используют штатные настройки YOOtheme. Настройки продукта находятся во вкладках «Контент» и «Настройки».

Autoplay

Один пейзаж в двух сезонах. Граница движется сверху вниз и возвращается обратно; наведение и фокус позволяют остановиться на детали.

Лето

Зима

Два сезона

Настройте движение

Задайте диапазон, длительность прохода и паузу на концах. Кнопка на изображении позволяет остановить и снова запустить сравнение.

Учитывайте настройки посетителя

Вне экрана и в скрытой вкладке движение приостанавливается. При включённом reduced motion автоматические анимации отключаются.

Загрузки

PHP 8.3.0, Joomla 6 и YOOtheme Pro 5.0.43. Рекомендуемое окружение — PHP 8.4.

Расширение Image Comparison

Скачать бесплатно

Системные требования

Минимальные

Joomla	5
YOOtheme Pro	5
PHP	7.4+

Поддержать разработку

Отсканируйте QR-код для перехода в сервис пожертвований CloudTips

Ваши пожертвования не облагаются налогом, но сервис берет комиссию за свои услуги.

Максимальная сумма 3000 ₽

Поддержать

Отсканируйте QR-код для перехода в сервис пожертвований Спасибо Мир

Ваши пожертвования не облагаются налогом, но сервис берет комиссию за свои услуги.

Сумма доната не ограничена

Поддержать

Список изменений

0.1.2

Изменено

Исправлены иконки в списке элементов Переход на единую систему иконок

Изменено

Изменена система настройки положения подписей

Лицензия

GNU General Public License version 3 or later.

Бесплатно

Скачивание без ограничений
Использование на любом количестве сайтов

Платно

Помощь в установке и настройке
Техническая поддержка
Исправление проблем совместимости со сторонними расширениями и библиотеками
Доработка функционала под конкретные требования заказчика

Загляните в раздел услуг

Image Comparison

Покажите разницу в деталях