Compare Before/After Images With Drag & Touch Events – iMatch.js

Category: Image , Javascript | December 21, 2020
Author: indaneey
Views Total: 236 views
Official Page: Go to website
Last Update: December 21, 2020
License: MIT

Preview:

Compare Before/After Images With Drag & Touch Events – iMatch.js

Description:

iMatch.js is a responsive, animated, mobile-friendly, highly customizable image comparison JavaScript library for both desktop and mobile.

It provides an elegant way to compare the difference between two images with either mouse drag or touch-swipe events.

More Features:

  • Horizontal Or Vertical slider.
  • Automatic image comparison.
  • Custom After/Before labels.
  • Easy to style using your own CSS.

How to use it:

1. Import the minified version of the iMatch.js JavaScript library.

<script src="./dist/imatch.min.js"></script>

2. Or import the iMatch.js as a component.

import  { iMatch } from '../dist/imatch.min.js'

3. Add before/after images to the iMatch container.

<div class="example">
  <img data-caption="Before" src="before.jpg" alt="image One">
  <img data-caption="After" src="before.jpg" alt="image Two">
</div>

4. Create a hidden range input to handle the oninput event.

<input hidden type="range" name="" id="range" min="0" max="100">

5. Initialize the image comparison slider. Possible parameters:

  • direction: Horizontal or Vertical
  • animation: Enable animation on init
  • lineClassName: CSS Class of image comparsion slider
  • arrowClassName: CSS Class of drag handle
var mySlider = new iMatch('.example')
mySlider.compare({
  direction: 'horizontal',
  animation: true,
  lineClassName: 'line',
  arrowClassName: 'dot'
})

6. Customize the image comparison slider in the CSS.

.dot{
  /* styles for drag handle */
}

.line{
  /* styles for slider */
}

.caption{
  /* styles for labels */
}

You Might Be Interested In:


Leave a Reply