🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

diffViewer is an extremely lightweight jQuery plugin for creating an image comparison slider to show the differences between two images.

Image-Comparison

Documentation

#jquery.diffviewer

example

####Create before, after html node

<div class="parent">   <p class="before"><img src="a.png" alt="a"></p>   <p class="after"><img src="b.png" alt="a"></p> </div> 

#####You can add separator node (optional)

  <div class="parent">     <p class="before"><img src="a.png" alt="a"></p>     <p class="after"><img src="b.png" alt="a"></p>     <div class="separator"></div> </div> 

####Set width & height

.before, .after {   position: relative;   width: 640px;   height: 320px; } 

####Runch

$('.parent').diffViewer(); 

options

$('.parent').diffViewer({before:'.before', after:'.after'}); 
before
set before class name.
*default : .before*
1.
after
set after class name.
*default : .after*
1.
separator (optional)
set separator class name
*default : .after*

##version

  • 1.0 - create library

You May Also Like