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.