Before/After Image Comparison Library – Comparimg

Category: Image , Javascript | March 21, 2016
Author: Sifawm
Views Total: 2,994
Official Page: Go to website
Last Update: March 21, 2016
License: MIT

Preview:

Before/After Image Comparison Library – Comparimg

Description:

Comparimg is a JavaScript library for comparing before / after images with a horizontal or vertical slider handle.

How to use it:

Pug the Comparimg’s CSS file in the head section of the html page.

<link rel="stylesheet" href="comparimg.min.css">

Create a DIV element for the image comparison UI.

<div id="comparimg"></div>

Initialize the Comparimg and specify 2 different images you want to compare.

cmp = new Comparimg('#comparimg', ['before.jpg', 'after.jpg'],
      {
        // options here
      });

All available options.

  • position: Position of the slider
  • mode: horizontal|vertical
  • images: array with the path of te before and after images
  • move: Callback when move
  • change: Callback when move is completed

You Might Be Interested In:

Leave a Reply