HTML5 fader/wiper

HTML5 fader and (s)wiper for image comparison

First release: July, 2012 Updated: May, 2020

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:

"data-filenames" is where you name the image files you want to compare (only 2 for wiper/window). For example:
```
data-filenames="img0.png, img1.png"
```
"data-wipercolor" defines the color of the "wiper". This may be a simple color (like "red") or, as above, a full-defined RGBA value (red,green,blue values from 0:255; alpha values from 0:1.0) For example:
```
data-wipercolor="rgba(200, 200, 100, .5)"
```
"data-wiperwidth" defines the width of the vertical wiper line. For example:
```
data-wiperwidth="3"
```
"data-wiperposition" defines the Y (vertical) coordinate of the little triangles drawn on each side of the wiper line. If this value is less than 0 (e.g., -1), then no triangles are drawn. The default is in the middle of the image. For example:
```
data-wiperposition="200"
```
"data-wiperhorizonal" defines the initial X (horizontal) coordinate of the wiper line. The default is in the middle of the image. For example:
```
data-wiperhorizontal="100"
```
"data-fader" specifies whether fading is used (value = "true") or not (value = "false"). "false" is the default. For example:
```
data-fader="true"
```
"data-relative" when set to "true" indicates that for the fader, the mouse drag (or touch) swipe left-right across the screen will be relative. Without this, the position of the pointer left-to-right is an absolute position for the fading. This option will cause the "data-move" parameter to be set to "false". For example:
```
data-relative="true"
```
"data-move" is either "true" or "false" and specifies whether the pointer must be "dragged" or simply "moved" across the image for the fade/wipe effect. The default is "false" (meaning a "drag" is required). As in:
```
data-move="true"
```
"data-wiperdiv" specifies the id of the div element in your HTML that is used to put the images (see examples). Specified like this:
```
data-wiperdiv="mydiv"
```
and then the <div> element would be specified like this:
```
<div id="mydiv">
</div>
```
"data-window" specifies that the "window mode" of the wiper should be used -- it just shows a square containing a sub-region of the second image superimposed on the first image. In this mode, if the "data-wipercolor" is specified, it will be used to draw an outline of the window. Valid values are "true" or "false" ("false" is the default). For example:
```
data-window="true"
```
"data-windowwidth" is the width (and height) of the "window", measured in pixels. For example:
```
data-windowwidth="200"
```

Here are some examples:

You can grab the Javascript code from here (the un-mimified source is faderwiper.js)

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.