Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 

RevealJS

A simple JavaScript image comparison library

Live Demo

Demo Gif


This library is designed to be plug and play. Simply download and include the Reveal.css and Reveal.js file on your page and set some tags in the HTML and the rest is taken care of auto-magically.

Basic Usage

Each reveal item consists of 2 images in a container. The simplest example is as follows.

<div class="reveal">
    <img src="leftImage.jpg">
    <img src="rightImage.jpg">
</div>

All you need is the .reveal class on the container of the images. Feel free to have as many of these reveal containers as you want on your page.

The other two components you need are the stylesheet and the script.

Add this line to your <head>:

<link rel="stylesheet" href="Reveal.css">

Add this line to the bottom of your <body>:

<script src="Reveal.js"></script>

Once the page is loaded, the script will automatically find all of the .reveal containers and setup everything for you. If you are adding content to your page after it's already loaded, check out the Advanced Usage below!

Advanced usage

You can call Reveal.init() and pass in a DOM element to initialize that reveal element. Make sure it still has the class="reveal" in the HTML!

Reveal.init(document.getElementById("newRevealItem"));

If you want to add custom behaviors when the reveal bar is updated, you can add an event to listen to Reveal.onupdate. There are two pieces of data passed to this event listener.

  • elem: A reference to the DOM node of the container for the current reveal.
  • percent: A value from 0-100 to represent where the slider is currently located. 0 is left, 100 is right.
Reveal.onupdate = function(data) {
    // Your code here
};

Browser Support

Works on all browsers both mobile and desktop! (Yes that includes Internet Explorer.)