Плагин Comparator

Разработка 6 мар. 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.


Другие статьи серии о о программных решениях, которые мы используем в своей работе:

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

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

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

Кирилл Гришанин

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