Plugin Comparator

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.