Слайдер для сравнения изображений

Настройка Компонент темы
33

Всем привет, наконец-то у меня появилось время поработать над этим.
Надеюсь, интерес к этому TC ещё сохраняется!

В этом PR TC полностью переработан со следующими функциями:

  • Масштабирование и перемещение (колесо мыши, щипок и элементы управления на изображении)
  • Полноэкранный режим
  • Открытие оригинальных изображений в полном размере в лайтбоксе
  • Опциональные метки «до»/«после» с настраиваемым расположением
  • Опциональная подпись
  • Несколько стилей ползунка (линия, тонкая, круг, захват) и настраиваемый цвет ползунка
  • Редактирование ползунков прямо в визуальном редакторе или с помощью markdown
  • Поддержка управления с клавиатуры (стрелки перемещают разделитель, +/-/0 для масштабирования)
  • Ограничение вставки ползунков по группам

Формат markdown изменился с использованием тега [wrap]. Обратная совместимость обеспечена.
Требуется версия 2026.6.0-latest.

Поддержка мобильных устройств и правостороннего письма (RTL). Хотя я не эксперт в UX и не смог много протестировать на мобильных устройствах или iOS.

Если вы хотите протестировать отдельно, вы можете использовать:

  • URL: https://github.com/arkshine/discourse-image-comparison-slider
  • ветка: modernize-with-rte
    (Рекомендую не редактировать ползунки из предыдущей версии, чтобы не менять формат markdown)
4 лайка