jQuery Plugin For Comparing Images By Mouse Move - Comparison

Another jQuery before/after image comparison plugin which allows you compare and find out the differences between two images by mouse move/drag.

See also:

• jQuery Plugin To Compare Two Images Via A Nice Interface - ClassyCompare
• jQuery Before and After Image Comparison Plugin - Image Reveal
• jQuery Plugin To Compare Two Images For Differences - Covering Bad
• Stylish jQuery Images Comparison Plugin - twentytwenty

Basic Usage:

1. Add the following CSS styles in your CSS file on include the jquery.comparison.css directly on your web page.

.jquery-comparison {
    position: relative;
}

.jquery-comparison img.before,
.jquery-comparison img.after {
    position: absolute;
}

.jquery-comparison.horizontal {
    cursor: w-resize;
}

.jquery-comparison.vertical {
    cursor: n-resize;
}

.jquery-comparison.locked {
    cursor: not-allowed;
}

2. Wrap the before/ after images you want to compare in an DIV element with data-* attributes to set the options. You can also pass the options on initialization.

<div class="jquery-comparison locked" data-snap="20" data-direction="horizontal" data-start="0.5">
<img src="before.jpg" class="before" >
<img src="after.jpg" class="after">
</div>

3. Include the jQuery library and jQuery Comparison plugin at the end of the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="src/js/jquery.comparison.js" type="text/javascript"></script>

4. All the available options with default values.

css: false,
direction: 'horizontal',
snap: 20,
start: 0.5

---

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