Stylish jQuery Images Comparison Plugin - twentytwenty
File Size: | 960 KB |
---|---|
Views Total: | 20288 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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:
- jQuery Plugin To Compare Two Images Via A Nice Interface - ClassyCompare
- jQuery Before and After Image Comparison Plugin - Image Reveal
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
- JS update
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.