Touch-enabled Image Comparison Plugin With jQuery - Before/After

File Size: 32.4 KB
Views Total: 1991
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Touch-enabled Image Comparison Plugin With jQuery - Before/After

Just another before/after image comparison plugin which enables the user to compare two different images in one slider. Supports both mouse movement and touch events.

Basic usage:

1. Include the required stylesheet jquery.beforeafter.min.css in the head section of the document.

<link rel="stylesheet" href="jquery.beforeafter.min.css">

2. Add before / after images into a container using IMG's src and data-aftersrc attributes.

<div class="g-before-after" id="example">
  <img src="before.png" data-aftersrc="after.png">
</div>

3. Include the jQuery Before/After plugin's script after jQuery library but before we close the body tag.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="jquery.beforeafter.min.js"></script>

4. Just call the function on the image container and we're done.

$('#example').beforeafter();

5. Plugin's default options.

$('#example').beforeafter({

  // enable touch events
  touch: true,

  // text to display in the slider
  message: "Slide",

  // hide the message when mouse over. 
  hide_message: true,

  // resets the slider when mouse leave
  reset: true,

  // Delay, in miliseconds before triggering the reset
  reset_delay: 3000,

  // true to drag left and right. false to drag top and bottom
  drag_horizontal: true,

  // true to split left and right. false to split top and bottom
  split_horizontal: true
  
});

Changelog:

2017-02-07

  • Added option to control the direction of the split and drag independently

This awesome jQuery plugin is developed by firdoussross. For more Advanced Usages, please check the demo page or visit the official website.