Preview Photo 1 Preview Photo 2 Preview Photo 3 Preview Photo 4 Preview Photo 5 Preview Photo 6 Preview Photo 7 Preview Photo 8 Preview Photo 9

Bower installation

To install via Bower, simply do the following:

$ bower install views --save


For default viewer:

var viewer = new Views(anyElement);

If you want to use viewer with custom options:

var viewer = new Views(anyElement, {
    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)

Open 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="">

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.


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

Browser support

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


Views.js is licensed under MIT license.