HTML5 fader and (s)wiper for image comparison

First release: July, 2012 Updated: September, 2016

A new JavaScript/HTML5 version of these utilities is now available. The same script is used for both, with just the parameters being different.

This requires an up-to-date browser, and will run on Tablets and Phones supporting HTML5.

To use this with your images, first copy the "faderwiper.js" file into your web server directory. Second, imbed the following HTML into your page:


<script type="text/javascript" id="WIPERSCRIPT" src="faderwiper_min.js"
   data-filenames="vis.jpg, ir4.jpg"
   data-wipercolor="rgba(200,200,0,.4)"
   data-wiperwidth="1"
   data-move="false"
   data-wiperposition="300"
   data-fader="false"
   data-window="false"
   data-wiperdiv="divcan" >
</script>

See a complete description of the parameters, below.) Finally, in your HTML, you have to invoke the WIPER code (by calling WIPER.go()) and you must create a div element with an "id" that matches the value above for the "wiperdiv" parameter. This is where the images will be put. You do not have to specify a size, as this will be computed from the image files.

Here is what these might look like:

<body style="background-color:#ffffff;" onload="WIPER.go()">

<div id="divcan" style="margin-top:10px;">
</div>

</body>

The parameters have the following forms/meanings/etc:

Here are some examples:

  1. Fading between two images by just moving the pointer
  2. Wiping between two images by 'dragging' the pointer
  3. Using the 'window' mode by just moving the pointer
  4. Fading between two images by 'dragging' the pointer --
    but with the relative positioning enabled, to provide more of a "swipe" feel.
  5. Fading between five images moving the pointer
  6. Fading between two (large) images dragging the pointer
  7. Wiping between two (large) images by just moving the pointer
You can grab the Javascript code from here (the un-mimified source is faderwiper.js)


The software described herein, "faderwiper", is an HTML5-based image fade/wipe tool for the web and is Copyright© 2012-2016 by Tom Whittaker.

This program is free software; you can redistribute it and/or modify it but you may NOT repackage and sell it without permission.

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.

The developers or their employers are not responsible for any and all ramifications, etc., which may result from using this software, or software derived therefrom. Furthermore, you agree to hold us harmless from any consequences related to the use of this software.

That's it.