Мы рады представить еще один плагин для 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>

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

<div class="wbt-comparator__map">&nbsp;</div>
$(".wbt-comparator__map").wbtComparator({
    src: ["sample/sevastopol-map.png", "sample/sevastopol-satellite.png"],
    initDelay: false
});

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

<div class="wbt-comparator__tsunami">&nbsp;</div>
$(".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

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

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

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

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

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

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

    Подписаться на новости блога

      Подписаться на обновления блога

      Коворкинг Starthub

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

      Коворкинг Wework

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

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