Мы рады представить еще один плагин для JQuery — Comparator, который позволяет визуально сравнивать два изображения, наложенные друг поверх друга.

Инициализация плагина в общем случае выглядит так:

<link rel="stylesheet" href="/wbt.comparator.css"><script src="/wbt.comparator.js"></script><script>$("#any-jq-selector").wbtComparator({    src: [        "first-image.jpg",        "second-image.jpg"    ]});</script>

Например, можно одновременно отобразить карту и снимки спутника или сравнить снимки, сделанные в разное время.

 
$(".wbt-comparator__map").wbtComparator({    src: [        "sample/sevastopol-map.png",        "sample/sevastopol-satellite.png"    ],    initDelay: false});

Или сравнить две фотографии одного и того же пейзажа, сделанные в разное время.

 
$(".wbt-comparator__tsunami").wbtComparator({    direction: "horizontal",    src: [        "sample/tsunami-before.jpg",        "sample/tsunami-after.jpg"    ],    timeout: 50});

Наконец, можно сравнить два изображения с разными графическими эффектами.

$(".wbt-comparator__colors").wbtComparator({    src: [        "sample/colors.jpg",        "sample/colors-inverted.jpg"    ],    timeout: false});

Опции

НазваниеОписание
srcМассив из двух строк с путем к изображениям, которые нужно сравнить. Array
directionЗадает направление сравнения. «horizontal»|«vertical»
initDelayЗадерживает стартовую анимацию, пока изображение не появится в видимой области экрана. Boolean
timeoutЦентрирует разделитель между двумя изображениями спустя указанное количество миллисекунд. Отключено при значении false. Integer | false

Загрузить этот и другие плагины можно на GitHub.

Если хотите убедиться, что все делаете правильно или проконсультироваться по поводу разработки вашего проекта, напишите нам.

Автор статьи
Кирилл Гришанин
Последние 10 лет руковожу командой аналитиков, дизайнеров и разработчиков

Подпишитесь на блог WB—Tech

Никакого спама, только анонсы новых статей

    Последние статьи

    Как эффективно хранить и актуализировать корпоративные данные средствами low/no-code

    Рассказываем, как организовали поток HR-данных, чтобы оргструктура и бонусно-бухгалтерские расчеты всегда были актуальны.

    Мало кода, больше результативности: платформы low-code и no-code

    Рассказываю о low-code и no-code платформах, примерах использования и разбираю нужно ли быть программистом.

    Как написать заявку для IT-студии на разработку сайта, приложения или веб-сервиса

    Что писать в заявке после «Здравствуйте» для реалистичной оценку услуг и сроков разработки.

    ИП Гришанин Кирилл Олегович
    ИНН 774313842609

    Коворкинг Starthub

    Б. Новодмитровская ул., 36, стр. 12, вход 6,
    Москва, Россия, 127015

    Коворкинг Wework

    Ahad Ha'am 54,Tel Aviv-Yafo,Израиль

    © 2023 WB—Tech. Мы разрабатываем уникальные решения для компаний из России, США и Европы.