/ Image Comparison

A jquery plugin for comparing two images

A jquery plugin for comparing two images

jQuery Images Compare

A jquery plugin for comparing two images.

Features

  • compatibility : ie9+

  • Effort to put appearance via css (easier to skin / override)

  • Touch friendly, mouse drag, with a big thanks to [Hammerjs] :)

  • Responsive

  • You can listen to change event to add some of your logic

  • You can change the value from external code

  • Animation option when changing the value

  • Optional alternative interaction modes : drag by default (the recommended one), click and mousemove (warning desktop friendly only for this settings)

  • Size : ~2k of js and ~0.5k of css (minified and gzipped)

NB : This library only does horizontal slide

Quick start

In your head section, include the css (a minified version is also provided) :

<link rel="stylesheet" href="images-compare.css">

Include the required javascript, before the body closing tag :

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
<script type="text/javascript" src="jquery.images-compare.min.js"></script>

Setup your html (minimal example) :

<!-- Main div container -->
<div id="myImageCompare">
    <!-- The first div will be the front element, to prevent FOUC add a style="display: none;" -->
    <div style="display: none;">
        <img src="assets/img/before.jpg" alt="Before">
    </div>
    <!-- This div will be the back element -->
    <div>
        <img src="assets/img/after.jpg" alt="After">
    </div>
</div>

Call the plugin :

$('#myImageCompare').imagesCompare();

Documentation

Install via npm

You can get the project via npm too :

npm install jquery-images-compare

Plugin settings

You can change plugin settings by passing an option object, example :

$('#myImageCompare').imagesCompare({
    initVisibleRatio: 0.2,
    interactionMode: "mousemove",
    addSeparator: false,
    addDragHandle: false,
    animationDuration: 450,
    animationEasing: "linear",
    precision: 2
});

List of available options :

key Description Default value
initVisibleRatio Visible ratio of front element on init, float value between 0 and 1 0.5 (front element is half visible)
interactionMode The interaction mode to use, valid values are "drag" (recommended), "mousemove", "click" "drag"
addSeparator Add a html separator element ? (thin vertical blank line) - boolean true
addDragHandle Add a html "drag handle" element ? - boolean true
animationDuration default animation duration in ms 400
animationEasing default animation easing to use ("linear", "swing") "swing"
precision Ratio precision, numbers after the decimal point 4

Changing appearance

The styling is done via css, to let you change it by css overrides.

Css classes

Basic list of main css classes, for full details please have a look at the css file.

Selector Description
.images-compare-container Container of the elements
.images-compare-before Front element
.images-compare-after Back element
.images-compare-separator Separator (thin vertical blank line)
.images-compare-handle Drag handle (circle)
.images-compare-left-arrow, .images-compare-right-arrow Drag handle arrows
.images-compare-label Label class element

Markup example with labels

You can add labels, add the class images-compare-label to your elements.

A default styling will be applied, you can override css rules to customize to your needs.

<!-- Main div container -->
<div id="myImageCompare">
    <!-- The first div will be the front element, to prevent FOUC add a style="display: none;" -->
    <div style="display: none;">
        <span class="images-compare-label">Before</span>
        <img src="assets/img/before.jpg" alt="Before">
    </div>
    <!-- This div will be the back element -->
    <div>
        <span class="images-compare-label">After</span>
        <img src="assets/img/after.jpg" alt="After">
    </div>
</div>

Events

List of events the plugin triggers :

Event name Description
imagesCompare:initialised This event is fired when init is done
imagesCompare:changed This event is fired when the value of visible front element is changed
imagesCompare:resized This event is fired when a resize window event has been received and treated

Example listening to change event

// important call data('imagesCompare') to get the real object and not the jquery one
var test = $('#myImageCompare').imagesCompare().data('imagesCompare');

test.on('imagesCompare:changed', function (event) {
    console.log('change');
    console.log(event);
    if (event.ratio < 0.4) {
        console.log('We see more than half of the back image');
    }
    if (event.ratio > 0.6) {
        console.log('We see more than half of the front image');
    }

    if (event.ratio <= 0) {
        console.log('We see completely back image');
    }

    if (event.ratio >= 1) {
        console.log('We see completely front image');
    }
});

Changing value

You can change value of visible front part via code :

// important call data('imagesCompare') to get the real object and not the jquery one
var test = $('#myImageCompare').imagesCompare().data('imagesCompare');
test.setValue(0);

Changing value with animation

You can change value of visible front part via code and request an animation :

// important call data('imagesCompare') to get the real object and not the jquery one
var test = $('#myImageCompare').imagesCompare().data('imagesCompare');

// here we pass true in second argument to say we want animation
test.setValue(0, true);

// you can change some settings via the plugin settings (see plugin settings section)
// you can too override duration and easing for one call :
// test.setValue(ratio, animate, duration, easing);

Contribute

Clone the repository, then launch an :

npm install

To lint js and css use :

npm run lint

To build use :

npm run build

To test use :

npm test

GitHub

CodeTea

A Nice collection of often useful examples done in HTML JavaScript CSS.

Read More