Responsive Image Diff Tool For Comparing Two Images - simpleImageDiff

A jQuery based responsive visual diff tool which makes it easy to compare two overlaid images with a vertical slider control.

How to use it:

1. Add two images you want to compare into a same DIV container.

<div data-diff>
  <img src="before.jpg">
  <img src="after.jpg">
</div>

2. Put jQuery library and the jQuery simpleImageDiff plugin at the bottom of your html page.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="jquery.simpleImageDiff.js"></script>

3. The primary CSS styles.

.b-diff, * {
  position: relative;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.b-diff img:nth-child(1) { z-index: 1; }

.b-diff img:nth-child(2) { z-index: 2; }

.b-diff img {
  position: absolute;
  top: 0;
  left: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

4. Style the image comparison slider.

.b-diff__control {
  position: absolute;
  z-index: 3;
  height: 100%;
  padding: 0 18px;
}

.b-diff__control:hover { cursor: col-resize; }

.b-diff__control:hover .b-diff__arrow_left {
  -webkit-transform: translate3d(-5px, 0, 0);
  transform: translate3d(-5px, 0, 0);
}

.b-diff__control:hover .b-diff__arrow_right {
  -webkit-transform: translate3d(5px, 0, 0);
  transform: translate3d(5px, 0, 0);
}

.b-diff__line {
  height: 100%;
  width: 4px;
  background: #f5f5f5;
}

.b-diff__arrow {
  position: absolute;
  top: 50%;
  width: 0;
  height: 0;
  -webkit-transition: transform .3s ease;
  transition: transform .3s ease;
  -webkit-transform: translate3d(0px, 0, 0);
  transform: translate3d(0px, 0, 0);
}

.b-diff__arrow_left {
  left: 0px;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid #f5f5f5;
}

.b-diff__arrow_right {
  right: 0px;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid #f5f5f5;
}

5. Active the image diff tool.

$('[data-diff]').simpleImageDiff();

6. Possible plugin options.

controlSpace: 18, //css padding
maxWidth: 'auto',
width: false,
resize: true,
titles: {
  before: '',
  after: ''
},
layout: {
  container: '<div class="b-diff"></div>',
  item: '<div class="b-diff__item"></div>',
  control: '<div class="b-diff__control">' +
  '<div class="b-diff__line"></div>' +
  '<div class="b-diff__arrow b-diff__arrow_left"></div>' +
  '<div class="b-diff__arrow b-diff__arrow_right"></div>' +
  '</div>',
  title: '<div class="b-diff__title"></div>'
}

7. You can also pass the parameters via Html5 data attributes as follow.

<div data-diff data-maxWidth="200" data-resize="1">
  <img data-title="before" src="before.jpg">
  <img data-title="after" src="after.jpg">
</div> 

Change log:

2015-10-07

• fix bug with vertical images
• add data attr params

---

This awesome jQuery plugin is developed by Hurtsok. For more Advanced Usages, please check the demo page or visit the official website.