jQuery Plugin For Image Comparison with Mouse Interaction - DiffWidget.js

Yet another jQuery image comparison widget that allows you to compare two different images via mouse over interaction.

Basic Usage:

1. Include jQuery library and the jQuery DiffWidget.js script at the bottom of the document.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="diffWidget.js"></script>

2. Create an empty container for the image comparison widget.

<div id="demo"></div>

3. Call the plugin on the empty container and set the paths of your before/after images.

$(document).ready(function(){
$('#demo').diffWidget({
  'top': 'before.jpg',
  'bottom': 'after.jpg'
});
})  

4. Add the following CSS snippets into your document or include the diffWidget.css directly.

.diffWidget {
  border: 1px solid rgba(0,0,0, 0.3);
  padding: 10px;
}

.diffWidget .wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}

.diffWidget .first {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 3;
  top: 0;
  left: 0;
  border-right: 1px solid rgba(0, 0, 0, 0.3);
}

.diffWidget .second {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2;
  top: 0;
  left: 0;
}

5. Available options and defaults.

width: '900px',
height: '300px',
top: 'red', // color of image path
bottom: 'blue', // color of image path
position: '50%' // start position

---

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