Мы рады представить еще один плагин для 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.
Если хотите убедиться, что все делаете правильно или проконсультироваться по поводу разработки вашего проекта, напишите нам.