Revealer | Angular directive that allows two images to be compared

revealer angular directive

revealer

Stars : 10

Forks : 10

Created by Pete

bower install revealer

Demo Download GitHub

Revealer

revealer

Angular directive that allows two images to be layered on top of each other and compared using a slider, demo or scroll demo.

Documentation

Include revelaer module source file in html

 <script src="path/to/revealer.js"></script>

Mark the revealer module as a dependecy of your angular app

angular.module('myApp', ['revealer']);

Then declare the revealer directive in your html.

<revealer top-image="top.png" top-label="Top Image" bottom-image="bottom.png" bottom-label="Bottom Label"></revealer>

Options

top-image

Path of image to appear on the top layer. This is the image that is revealed

top-image="top.png"

bottom-image

Path of image to appear on the bottom layer

bottom-image="bottom.png"

top-label (optional)

Label to appear on the top image

top-label="Top Image"

bottom-label (optional)

Label to appear on the bottom image

bottom-label="Bottom Label"

start-position (optional)

set the start position of the revealer in percentage (default : 50)

start-position="60"

on-complete (optional)

if set on the scope, this function will be invoked when the drag action has complete

on-complete="vm.onComplete('called from the controller')"

scroll (optional)

Set postion of the revealer on scroll, the revealer will only happen when the element is in the windows viewport.

note when set the start-postion will be 0

scroll="true"

scroll-offset (optional)

change the trigger location of the scroll functionality

scroll-offset="500"

Change log

1.0.0

  • throttle function #8
  • page-scroll functionality #10
  • updated documentation

breaking changes

  • removed topimage, bottomimage, toplabel, bottomlabel

0.1.4

  • support UMD #7

0.1.3

  • updated revealer tests
  • onComplete function fature added #9
  • updated documentation

0.1.2

  • fix release listener issue #11

0.1.1

  • fix offset issue #6
  • updated gulp task to output to a single destination

0.0.1

  • intital release

License

MIT

Javscript

Javascript plugin

Angular-js