Плагин 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.