ClassyCompare
Before and after, the easy way!

Introduction

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

License

This jQuery plugin is distributed under the MIT license. Enjoy!

Demo

After Before

Setup

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.

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.

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


    Your after caption
    Your before caption

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
    });
});

Warning

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

Options

  • 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