A Lightweight vanilla JavaScript lightbox image viewer
Switch branches/tags
Nothing to show
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.
dist
src
.bowerrc
.gitignore
Gruntfile.js
LICENSE
README.md
bower.json
package.json

README.md

Views.js

View.js is a lightweight image viewer written in vanilla JavaScript.

Bower installation

To install via Bower, simply do the following:

$ bower install views --save

Usage

For default viewer:

var viewer = new Views(element);

element must be an anchor element with the href attribute

If you want to use viewer with custom options:

var viewer = new Views(element, {
    defaultTheme: true,    // If you don't want to use the default viewer theme, disable this option  
    prefix: '',    // You can add prefix to html ids and classes of the viewer's elements, e.g. if you want to set up multiple viewer instances with different styles
    loader: '',    // Can be a html or a text, it will be inserted to the loader
    closeButton: '',   // Can be a html or just a text, it will be inserted to the close button
    anywhereToClose: true,    // By default you can click anywhere to close viewer
    openAnimationDuration: 0,    // If you use css animations set this option with opening animation duration in ms (without ms)
    closeAnimationDuration: 0    // If you use css animations set this option with closing animation duration in ms (without ms)
});

Opened viewer template looks like this:

<div id="views-wrapper">
    <div class="views-background"></div>
    <div class="views-content">
        <div id="views-close"></div>
        <div class="views-loader"></div>
        <img class="views-image" src="">
    </div>
</div>

E.g., if you set a prefix option to "light" every class or id will be start with "light-" #light-views-wrapper

When viewer is opening "views-opening" class is added to #views-wrapper, and when it's closing "views-closing" is added.

Methods

var viewer = new Views(element);
viewer.open(); // Open viewer
viewer.close(); // Close viewer

Events

var viewer = new Views(element);
viewer.on('open', onOpen);
viewer.on('close', onClose); 

Browser support

All modern browsers and IE10+. For IE9 support classList polyfill is needed, for IE8 support EventTarget polyfill is also needed.

License

Views.js is licensed under MIT license.