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.
<link href="/path/to/jquery.cross2.css" rel="stylesheet">- Include the jQuery Cross2 plugin's script and other required resources.
<script src="/path/to/jquery.min.js"></script> <script src="/path/to/jquery.event.drag.min.js"></script> <script src="/path/to/jquery.cross2.js"></script>- Include the OPTIONAL jQuery mousewheel plugin for mouse wheel support.
<script src="/path/to/jquery.mousewheel.js"></script>- Include the OPTIONAL jQuery easing plugin for additional easing effects.
<script src="/path/to/jquery.easing.min.js"></script>- Insert before and after images you want to compare into a container like this:
<div class="cross2"> <img src="1.jpg" alt="before" /> <img src="2.jpg" alt="after" /> </div> <!-- OR --> <div class="cross2"> <a href="#"><img src="1.jpg" alt="before" /></a> <a href="#"><img src="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 position vertical: false, // vertial or horizontal slider animationDuration: 150, // animation duration in mc easing: 'swing', // easing effect(requirs jQuery easing plugin) clickEnabled: false, // compare images on click mousemoveEnabled: false, // compare images on mouse over mousewheelEnabled: false, // enable mouse wheel(requirs jQuery mousewheel plugin) titlesEnabled: true, // show before / after text labels titleBefore: 'Before', // text label for before image titleAfter: 'After', // text label for after image }); }); </script>Support:
- IE8+
- Firefox
- Chrome
- Safari
- Android
- IOS (iPhone, iPad)
