Stylish jQuery Images Comparison Plugin - twentytwenty

File Size: 960 KB
Views Total: 20288
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Stylish jQuery Images Comparison Plugin - twentytwenty

twentytwenty is a clean and easy-to-use jQuery plugin that allows you to compare and showcase the difference between two images side by side.

See also:

How to use it:

1. Include required jQuery twentytwenty CSS in the header

<link href="css/twentytwenty.css" rel="stylesheet" type="text/css" />

2. Insert 2 images to compare

<div class="demo"> 
<img src="img/1_1.jpg" /> 
<img src="img/1_2.jpg" /> 
</div>

3. Include jQuery library and jQuery twentytwenty plugin on the web page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script src="js/jquery.twentytwenty.js"></script> 

4. Include required jquery.event.move.js script for 'movestart', 'move' and 'moveend' events

<script src="js/jquery.event.move.js"></script> 

5. Call the plugin with options.

$(".demo").twentytwenty({

  //  How much of the before image is visible when the page loads
  default_offset_pct: 0.5

  // or vertical
  orientation: 'horizontal',

  // label text
  before_label: 'Before',
  after_label: 'After',

  // enable/disable overlay
  no_overlay: false,

  // move with handle
  move_with_handle_only: true,

  // click to move
  click_to_move: false
  
});  

Changelog:

2018-11-28

  • Highlighted images in IE

2018-08-07

  • Disabled finding overlay container

2017-09-11

  • fix touchmove

2017-08-15

  • fix touchmove

2017-06-10

2017-05-23

  • Support custom Before and After labels

2016-09-23

  • Declared two previously undeclared variables. Allowing the slider to be executed in strict mode

2014-05-20

  • set z-index of twenty-twenty container to 0

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