jQuery Before/After Plugin
This is a simple plugin to create a before/after image that responds to mouse movement as well as touch movements.
Like this:
Requirements
jQuery 1.8+
Setup
Include both jquery.beforeafter.min.js and jquery.beforeafter.min.css in your project file
Use the following markup in the HTML:
<div class="g-before-after" id="example1"> <img src="img_before.png" data-aftersrc="img_after.png"> </div> The important bit is the src and data-aftersrc properties of the <img> tag, and the class g-before-after on the container div.
Then, call this function in your JavaScript:
$('#example1').beforeafter(); Options
| Option | Type | Default | Description |
|---|---|---|---|
| touch | Boolean | true | Enable or Disable touch events (for mobile). |
| message | String | "Slide" | Message to show in the middle of the divider. |
| hide_message | Boolean | true | Hides the message when mouse enters the area. Message will be shown again on reset. |
| reset | Boolean | true | Resets the divider to the middle when mouse leaves the area. |
| reset_delay | Integer | 3000 | Delay, in miliseconds before triggering the reset (if reset above is true). |
| drag_horizontal | Boolean | true | true to drag left and right. false to drag top and bottom. |
| split_horizontal | Boolean | true | true to split left and right. false to split top and bottom. |
More example uses
Vertical split and vertical drag:
$('#example1').beforeafter({drag_horizontal: false, split_horizontal: false}); Horizontal split and vertical drag:
$('#example1').beforeafter({drag_horizontal: false, split_horizontal: true}); Notes
This plugin is a quick put-together. Therefore it is not optimized nor it is performant. Feel free to submit improvements!
