jQuery Before/After
Sometimes you need a simple tool to visually show the difference between two images and a basic jQuery plugin is quite suited for that (if you can stomach ~89KB just for jQuery, ~30KB if you gzip it but you probably already have it on your website).
| Language | JavaScript |
| License | GPLv3 |
| Version | 1.1.0 |
| Release date | December 20, 2021 |
| Download | zip archive |
| SHA-256 | fb88364f705ce6ee95a201b37b697abbccc289b3de7313dc102e9738081d0dcf |
Usage
The plugin code is depending on the jQuery library so we have to add it to our page. Download it from the official page (please don’t use a CDN), extract the archive on your computer and copy the jquery.min.js file. Add the HTML below to your page’s head section (and adjust the URLs, of course).
<link rel="stylesheet" href="/css/jquery-before-after.css" />
and
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery-before-after.js"></script>
Also we need to add the two images into a container (and remember to use image alt-text if you want captions).
<div class="gallery">
<img alt="After caption" src="/img/image1.jpg" />
<img alt="Before caption" src="/img/image2.jpg" />
</div>
All that is left it to trigger the before_after() plugin function on the container (and pass some options if you want to change the defaults).
$('.gallery').before_after({
left_gap: 0,
caption: true
});
Options
| Setting | Default | Description |
|---|---|---|
caption | false | Toggle the image captions. |
left_gap | 10 | The gap to the left of the image, in px. |
right_gap | 10 | The gap to the right of the image, in px. |
gap | 50 | The default gap shown before any interactions, in px. |
reveal | 0.5 | Show the caption if you scroll below this, in px. |
Demo
You can see a demo of the plugin in this post.
License
This plugin is written by sizeof(cat) and released under GPLv3.
This program is free software: you can redistribute it and/or modify it under
the terms of the GNU General Public License as published by the Free Software
Foundation, either version 3 of the License, or (at your option) any later
version.
This program is distributed in the hope that it will be useful, but WITHOUT ANY
WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A
PARTICULAR PURPOSE. See the GNU General Public License for more details.
You should have received a copy of the GNU General Public License along with
this program. If not, see <https://www.gnu.org/licenses/>.
author
created December 20, 2021
updated February 17, 2022
words 371
tags #jquery, #plugin, #javascript