JQuery Cross2

Just another jQuery based image diff tool for creating an animated, customizable image comparison slider to view before and after images.

Demo page

Features:

• Horizontal or vertical comparison slider.
• Custom text labels for before / after images.
• Based on event.drag.
• Supports mousewheel and easing.
• Focusable.
• Keyboard control supported.
• Responsive

Basic Usage:

• Include the required jQuery Cross2 plugin's stylesheet.

<linkhref="/path/to/jquery.cross2.css" rel="stylesheet">

• Include the jQuery Cross2 plugin's script and other required resources.

<scriptsrc="/path/to/jquery.min.js"></script><scriptsrc="/path/to/jquery.event.drag.min.js"></script><scriptsrc="/path/to/jquery.cross2.js"></script>

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

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

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

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

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

<divclass="cross2"><imgsrc="1.jpg" alt="before" /><imgsrc="2.jpg" alt="after" /></div><!-- OR --><divclass="cross2"><ahref="#"><imgsrc="1.jpg" alt="before" /></a><ahref="#"><imgsrc="2.jpg" alt="after" /></a></div>

• Initialize the plugin.

<script>$(window).load(function(){$('.cross2').cross2();});</script>

Default Options:

<script>$(window).load(function(){$('.cross2').cross2({value: 0.5,// initial slider positionvertical: false,// vertial or horizontal slideranimationDuration: 150,// animation duration in mceasing: 'swing',// easing effect(requirs jQuery easing plugin)clickEnabled: false,// compare images on clickmousemoveEnabled: false,// compare images on mouse overmousewheelEnabled: false,// enable mouse wheel(requirs jQuery mousewheel plugin)titlesEnabled: true,// show before / after text labelstitleBefore: 'Before',// text label for before imagetitleAfter: 'After',// text label for after image});});</script>

Support:

• IE8+
• Firefox
• Chrome
• Safari
• Android
• IOS (iPhone, iPad)