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).

LanguageJavascript
LicenseGPLv3
Version1.1.0
Release dateDecember 20, 2021
Downloadzip archive
SHA-256fb88364f705ce6ee95a201b37b697abbccc289b3de7313dc102e9738081d0dcf

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">
<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).

1
2
3
4
$('.gallery').before_after({
	left_gap: 0,
	caption: true
});

Options

SettingDefaultDescription
captionfalseToggle the image captions.
left_gap10The gap to the left of the image, in px.
right_gap10The gap to the right of the image, in px.
gap50The default gap shown before any interactions, in px.
reveal0.5Show 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/>.