ClassyCompare
Before and after, the easy way!

ClassyCompare is a jQuery plugin written by Marius Stanciu - Sergiu, a plugin that gives you the ability to compare two images (before and after, etc) via a nice interface.

Download it

First you need to include the jQuery library, since ClassyCompare is a plugin. You can download it from the jQuery website or link it directly from the Google CDN.

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

Secondly, you need to include the jQuery ClassyCompare javascript and the CSS file into your page, which you can do it by adding the code below to your page.

<script src="js/jquery.classycompare.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.classycompare.min.css" />

Next, you implement the actual image(s) that will be processed by the plugin. The structure is as simple as it can get.

<div class="sample">
    <img alt="Your after caption" src="your-image1.jpg" />
    <img alt="Your before caption" src="your-image2.jpg" />
</div>

As the last step, you trigger the ClassyCompare() function on the element you just created. In this case, we trigger the function on the div with the class sample.

$(window).load(function() {
    $('.sample').ClassyCompare({
        leftGap: 0,
        caption: true
    });
});

• Parameters

  ---

• caption - toggle the showing of image caption, can be true or false, default is false
• leftGap - the gap to the left of the image, default is 10 pixels
• rightGap - the gap to the right of the image, default is 10 pixels
• gap - the default gap shown before any interactions, default is 50 pixels
• reveal - show the caption if you scroll below this, default is 0.5 pixels