We are happy to present another simple JQuery plugin called Comparator which allows you to visually compare two overlapped images.
Basic usage:
<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>
For example, you can use it to simultaneously show map and satellite views of some area, or to compare current and past satellite shots.
$(".wbt-comparator__map").wbtComparator({
src: [
"sample/sevastopol-map.png",
"sample/sevastopol-satellite.png"
],
initDelay: false
});
Or you can compare two photos taken from the same spot but in different time.
$(".wbt-comparator__tsunami").wbtComparator({
direction: "horizontal",
src: [
"sample/tsunami-before.jpg",
"sample/tsunami-after.jpg"
],
timeout: 50
});
Finally, you can compare similar and awesome images with different visual effects.
$(".wbt-comparator__colors").wbtComparator({
src: [
"sample/colors.jpg",
"sample/colors-inverted.jpg"
],
timeout: false
});
Options
Name | Description |
---|---|
src | Array of two string paths for images to compare. Array |
direction | Sets the layout of comparison. «horizontal»|«vertical» |
initDelay | Delays initial animation until top border of image box is visible on screen. Boolean |
timeout | Centers border positions after this timeout. Centering is disabled when set to false. Integer | false |
Download this and other plugins from GitHub.