jQuery ClassyCompare

Overview

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.

Instructions

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="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

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

<script src="js/jquery.classycompare.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.classycompare.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="sample1">
    <img alt="Your before caption" src="your-image1.jpg" />
    <img alt="Your after 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 sample1.

$(window).load(function() {
    $(".sample1").ClassyCompare({
        defaultgap: 50,
        leftgap: 0,
        rightgap: 10,
        caption: true,
        reveal: 0.5
    });
});

NOTE: You have to use $(window).load() and not $(document).ready(), else the script will go bonkers.

Options

caption - toggle the showing of image caption. Options can be: true/false

leftgap - the gap to the left of the image

rightgap - the gap to the right of the image

defaultgap - the default gap shown before any interactions

Demo

Before After. Amazing, heh?!

Showing a caption for both of the states.

Before After. Amazing, heh?!

Showing no caption.

Before After

Another before/after photo, Japan after 2011 tsunami and earthquake.