A bit of js to show the "before and after" of two images
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
.gitignore
LICENSE
README.md
gulpfile.js
package-lock.json
package.json

README.md

imReveal

A bit of js to show the "before and after" of two images

imReveal demo

Usage

Simply include the imReveal js and css files into your page. Your two image should be wrapped by a container. Then simply create a new imReveal object by passing it the wrapper HTMLElement.

<script src="imReveal.min.js"></script>
<link rel="stylesheet" href="imReveal.css"/>
...
<div id="myCustomId">
  <img src="path/to/left/image.jpg"/>
  <img src="path/to/right/image.jpg"/>
</div>

<script> document.onload.addEventListener(()=>{
  var ir = new imReveal(window.myCustomId);
  });
</script>

Demo

A live demo can be found here

Troubleshooting

imReveal should pick up layout changes on the page and update accordingly. However if it doesn't you can manually refresh it by calling reinit() on the imReveal object.

License

imReveal is licensed under the MIT license.