Javascript

【Javascript】軽量のJavaScript画像ビューアViews.js

December 18, 2016
Views.js

Views.jsは軽量のJavaScript画像ビューア。

Usage

var viewer = new Views(anyElement);

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)
});
<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>

Methods

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

MIT