jQuery Plugin To Compare Two Images For Differences - Covering Bad

Covering Bad is a stunning jQuery plugin for covering an image by another image so that you can compare the differences between two images by vertically or horizontally dragging the handler.

See also:

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

How to use it:

1. Load the required coveringBad.css in the head section of your page.

<link rel="stylesheet" href="css/coveringBad.css" type="text/css"/>

2. Create the html for the image comparison interface.

<div class="covered demo" data-passive="images/b2.jpg" data-active="images/b1.jpg">
<div class="handler"></div>
<div class="changeable"></div>
</div>

3. Load the jquery javascript library and jQuery Covering Bad plugin at the bottom of the page.

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="js/coveringBad.js"></script> 

4. Call the plugin with options.

<script type="text/javascript">
$('.demo').coveringBad({
marginY : 30 , // margin-top and margin-bottom
marginX : 30 , // margin-left and margin-right
setX  : 200,
setY  : 100 ,
direction   : "vertical" // vertical or horizontal
});
</script>

Change log:

2013-12-25

• set background-image by data attributes

---

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