jQuery cover photo for comparison – Covering Bad plugin

DirectCode | January 16, 2016 | Awesome, Effects, jQuery, Plugins | No Comments

Covering Bad is a jQuery cover photo plugin for covering an image by another image, so that we can compare the differences between two images by vertically or horizontally, dragging the slider.

Covering Bad – the jQuery cover photo plugin

It’s a simple jQuery Plugin for cover an item by another item, with dragging ability.

How to use?

Include:

<link href="css/coveringBad.css" type="text/css"/>
<link href="css/font-awesome.min.css"/>
<script src="js/coveringBad.js" ></script>

Add HTML:

<div class="covered">
    <div class="handle"></div>
    <div class="changeable"></div>
</div>

Add JavaScript:

$(function() {
    $('.covered').coveringBad();
});

Options

    marginY : 20,   // Handle's distance from top and bottom
    marginX : 20,   // Handle's distance from left and right
    setX    : 30,   // Defulat location for handle from left
    setY    : 150,  // Defulat location for handle from top
    direction : "horizontal" // would be horizontal/vertical

More than one

<div class="covered first">
    <div class="handle"></div>
    <div class="changeable"></div>
</div>
<div class="covered second">
    <div class="handle"></div>
    <div class="changeable"></div>
</div>
<div class="covered third">
    <div class="handle"></div>
    <div class="changeable"></div>
</div>

$(function() {
    $('.first').coveringBad();
    $('.second').coveringBad();
    $('.third').coveringBad({
        marginY : 20 ,
        marginX : 400 ,
        setX  : 400,
        setY  : 235 ,
        direction   : "vertical"
    });
});

Another example in action: