Плагин Comparator

March 06 2014

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

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

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

    P&L-отчет и анализ нормы выработки сотрудников в проектном бизнесе

    Кейс будет полезен всем, кто управляет проектным бизнесом. Рассказали, как сделать отчетность, в которой отражено главное — прибыльность каждого сотрудника, задачи и проект.

    Инструкция по настройке ботов-ассистентов для автоматизации бизнес-процессов

    Рассказали, как настроить 3 автоматизации рутинной деятельности в компании.

    Принципы организации и отслеживания изменений в автоматизированных процессах компании

    Рассказали, как организовать хранение данных об автоматизациях, созданных в Zapier и Integromat.

    Наши клиенты

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

    Коворкинг Starthub

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

    Коворкинг Wework

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

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