Плагин Comparator

06 марта 2014
Плагин Comparator

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

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

Наши клиенты

WBTech - Клиенты - МТС
WBTech - Клиенты - Высшая Школа Экономики
WBTech - Клиенты - Лента
WBTech - Клиенты - Верный
WBTech - Клиенты - Рамблер
WBTech - Клиенты - Совкомбанк
WBTech - Клиенты - Билайн
WBTech - Клиенты - Леруа Мерлен
WBTech - Клиенты - Ульяна Сергеенко
WBTech - Клиенты - Правительство Москвы
ИП Гришанин Кирилл Олегович
ИНН 774313842609
Коворкинг Starthub
Б. Новодмитровская ул., 36, стр. 12, вход 6, Москва, Россия, 127015
Коворкинг Wework
Ahad Ha'am 54, Tel Aviv-Yafo, Израиль