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

Опции

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

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