This time I will share jQuery Plugin and tutorial about Animated & Customizable Image Comparison Plugin with jQuery – Cross2, hope it will help you in programming stack.
Just another jQuery based image diff tool for creating an animated, customizable image comparison slider to view before and after images.
Features:
- Custom text labels for before / after images.
- Horizontal or vertical comparison slider.
- Supports mouse wheel and mouse drag.
- Easing functions based on jQuery easing plugin.
- Allows to compare before / after images programmatically.
Basic usage:
1. Add the required jQuery Cross2 plugin’s stylesheet to the head section of the web page.
1 |
<link href="css/jquery.cross2.css" rel="stylesheet"> |
2. Add the jQuery Cross2 plugin’s script and other required resources at the bottom of the web page.
1 |
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> |
2 |
<script src="/path/to/jquery.event.drag.min.js"></script> |
3 |
<script src="js/jquery.cross2.js"></script> |
3. Include the OPTIONAL jQuery mousewheel plugin for mouse wheel support.
1 |
<script src="/path/to/jquery.mousewheel.js"></script> |
4. Include the OPTIONAL jQuery easing plugin for additional easing effects.
1 |
<script src="/path/to/jquery.easing.min.js"></script> |
5. Insert before and after images you want to compare into a container like this:
1 |
<div id="demo" class="cross2"> |
2 |
<img src="1.jpg" alt="before"> |
3 |
<img src="2.jpg" alt="after"> |
6. Initialize the plugin by calling the function on the top element.
7. There are several configuration options which can be passed to cross2() method as an object:.
09 |
animationDuration: 150, |
19 |
mousemoveEnabled: false, |
23 |
mousewheelEnabled: false, |
29 |
titleBefore: 'Before', |
8. Public methods.
02 |
$('#demo').data('cross2').showBefore(); |
05 |
$('#demo').data('cross2').showAfter(); |
08 |
$('#demo').data('cross2').showHalfs(); |
11 |
$('#demo').data('cross2').destroy(); |
This awesome jQuery plugin is developed by nxeed. For more Advanced Usages, please check the demo page or visit the official website.
