jQuery Plugin To Compare Two Images For Differences - Covering Bad

File Size: Unknown
Views Total: 5194
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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:

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>

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">
marginY : 30 , // margin-top and margin-bottom
marginX : 30 , // margin-left and margin-right
setX  : 200,
setY  : 100 ,
direction   : "vertical" // vertical or horizontal

Change log:


  • 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.