jQuery uCompare plugin by Class.PM

Overview

---

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

Download

---

You can download the last version of the plugin, or browse the archive for older versions.

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

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

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

<script type="text/javascript" src="js/jquery.ucompare.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.ucompare.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 uCompare function on the element you just created. In this case, we trigger the function on the div with the id sample1.

<script type="text/javascript">
$(document).ready(function() {
   $('.sample1').ucompare({
      defaultgap: 50,
      leftgap: 0,
      rightgap: 10,
      caption: true,
      reveal: 0.5
   });
});
</script>

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