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).
|Release date||December 20, 2021|
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).
|Toggle the image captions.|
|The gap to the left of the image, in px.|
|The gap to the right of the image, in px.|
|The default gap shown before any interactions, in px.|
|Show the caption if you scroll below this, in px.|
You can see a demo of the plugin in this post.
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/>.