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

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

<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
});

Опции

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

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