jQuery compare images – Comparing images in JavaScript!

Comparing images in JS? Sure thing! With solutions such as jQuery compare images.

jQuery compare images plugin

Responsive solution! Many features available, such as: compatibility (even ie9+), animation options, touch friendly, mouse drag (Hammerjs), lightweight. Optional alternative interaction modes : drag by default (the recommended one), click and mousemove (warning desktop friendly only for this settings).

Comparing images with jQuery
Comparing images with jQuery

Setup


<link rel="stylesheet" href="images-compare.css">

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="hammer.js/2.0.8/hammer.min.js"></script>
<script type="text/javascript" src="jquery.images-compare.min.js"></script>

...

<!-- Main div container -->
<div id="myImageCompare">
    <!-- The first div will be the front element -->
    <div style="display: none;">
        <img src="assets/img/before.jpg" alt="Before">
    </div>
    <!-- This div will be the back element -->
    <div>
        <img src="assets/img/after.jpg" alt="After">
    </div>
</div>

Also it can be installed via npm:

npm install jquery-images-compare

Sample

// Call the plugin
$('#myImageCompare').imagesCompare();

// ...

// Custom plugin settings example
$('#myImageCompare').imagesCompare({
    initVisibleRatio: 0.2,
    interactionMode: "mousemove",
    addSeparator: false,
    addDragHandle: false,
    animationDuration: 450,
    animationEasing: "linear",
    precision: 2
});

Dependencies:

jQuery

Hammerjs

License: MIT

GitHub

https://github.com/sylvaincombes/jquery-images-compare

scraperapi

See also

jQuery cover photo for comparison – Covering Bad plugin

jQuery beforeAfter

How TO – Image Comparison Slider

There are also versions for React JS:

https://github.com/junkboy0315/react-compare-image

https://github.com/transitive-bullshit/react-before-after-slider

and Vue.js:

https://vue-compare-image.yuuniworks.com/

https://github.com/firdoussross/jquery-beforeafter

Enjoy!