Skip to content

Simple JavaScript plugin for image comparison sliders

License

Notifications You must be signed in to change notification settings

CreativeTechGuy/RevealJS

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

RevealJS

A simple JavaScript image comparison library

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.)