jQuery Before and After Image Comparison Plugin - Image Reveal

Image Reveal is a jQuery plugin that allow you to compare and find the difference between 2 images (before and after) by dragging the slidebar over the images.

See also:

• jQuery Plugin To Compare Two Images Via A Nice Interface - ClassyCompare

How to use it:

1. Include jQuery library and jQuery Image Reveal plugin in the header

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.imageReveal.js"></script>

2. Include jQuery Image Reveal stylesheet file on the page

<link rel="stylesheet" href="jquery.imageReveal.min.css" />

3. The html

<div id="demo" class="imageReveal"> 
<img src="images/1-before.jpg" title="Before"> 
<img src="images/1-after.jpg" title="After"> 
</div>

4. Call the plugin with options

<script>
$(window).load(function() {
$('#demo').imageReveal({
    barWidth: 15,
    touchBarWidth: 40,
    paddingLeft: 0,
    paddingRight: 0,
    startPosition: 0.25,
    showCaption: true,
    captionChange: 0.5,
    width: 500,
    height: 500
});
});
</script>

Change log:

v0.1.10 (2015-05-20)

• update.

v0.1.9 (2013-07-23)

• Add animation to captions

---

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