Simple jQuery Before / After Image Comparison Plugin - imageCompare

imageCompare is a lightweight jQuery plugin that creates an image comparison slide control to compare two different images with mouse move. Without the need to write any CSS rules.

How to use it:

1. Download and import the jQuery imageCompare plugin after jQuery JavaScript library, but before the closing body tag.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="jquery.imageCompare.js"></script>

2. Insert before and after images you want to compare into the document following the markup like so:

<img src="1.jpg" data-cover="2.jpg">

3. Call the plugin on the img tag and done.

$("img").imageCompare();

4. Set the width & color options for the image comparison slide control.

$("img").imageCompare({
  grapWidth:"1px",
  grapColor: "white"
});

---

This awesome jQuery plugin is developed by lazygyu. For more Advanced Usages, please check the demo page or visit the official website.