Animated & Customizable Image Comparison Plugin with jQuery - Cross2

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.

<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.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="/path/to/jquery.event.drag.min.js"></script>
<script src="js/jquery.cross2.js"></script>

3. Include the OPTIONAL jQuery mousewheel plugin for mouse wheel support.

<script src="/path/to/jquery.mousewheel.js"></script>

4. Include the OPTIONAL jQuery easing plugin for additional easing effects.

<script src="/path/to/jquery.easing.min.js"></script>

5. Insert before and after images you want to compare into a container like this:

<div id="demo" class="cross2">
  <img src="1.jpg" alt="before">
  <img src="2.jpg" alt="after">
</div>

6. Initialize the plugin by calling the function on the top element.

$('#demo').cross2();

7. There are several configuration options which can be passed to cross2() method as an object:.

// initial slider position
// 0.5 = half
value: 0.5, 

// vertial or horizontal slider
vertical: false, 

// animation duration in ms
animationDuration: 150, 

// easing effect
// requirs jQuery easing plugin
easing: 'swing', 

// compare images on click
clickEnabled: false,

// enable mouse drag
mousemoveEnabled: false, 

// enable mouse wheel
// requirs jQuery mousewheel plugin
mousewheelEnabled: false,

// show before / after text labels
titlesEnabled: true, 

// text label for before image
titleBefore: 'Before',

// text label for after image
titleAfter: 'After'

8. Public methods.

// show before image
$('#demo').data('cross2').showBefore();

// show after image
$('#demo').data('cross2').showAfter();

// set value option to 0.5
$('#demo').data('cross2').showHalfs();

// destroy the plugin
$('#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.