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

ClassyCompare is a fancy and easy-to-use jQuery plugin that enables you to compare and find the differences in two versions of an image.

Basic Usage:

1. Include the latest jQuery library and jQuery ClassyCompare plugin in the head section of your web page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/jquery.classycompare.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.classycompare.css" />

2. Create a container and insert two versions of an image that you want to compare

<div class="demo"> 
<img src="images/demo/image1.jpg" alt="Before" /> 
<img src="images/demo/image2.jpg" alt="After" /> 
</div>

3. Call the plugin with options

<script>
$(window).load(function() {
$('.demo').ClassyCompare({
  defaultgap:50, // the default gap shown before any interactions
  leftgap:0,  // the gap to the left of the image
  rightgap:10, // the gap to the right of the image
  caption: true, // toggle the showing of image caption
  reveal: 0.5
});
});
</script>

---

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