Modal Gallery

Example

Supports creation both programmatic gallery creation , and creation from DOM elements and attributes (Lightbox-style)

Lightbox-style implementation:

• 
• 
• 

---

Installation

$ npm i -S storm-modal-gallery

Usage

HTML for a lightbox-style implementation

CSS

Sample minimum CSS required to show/hide each section

JS

Either import and initialise using a named import:

import ModalGallery from 'storm-modal-gallery';
            
ModalGallery.init('.js-modal-gallery');

Or async using storm-load.js, add the .standalone file to your project, then initialise using the global name:

Load('/content/js/async/storm-modal-gallery.standalone.js')
.then(() => {
    StormModalGallery.init('.js-modal-gallery');
});

Programmatic initialisation with an array of gallery item items:

import ModalGallery from 'storm-modal-gallery';
let gallery = ModalGallery.init([{
    src: 'http://placehold.it/500x500',
    srcset:'http://placehold.it/800x800 800w, http://placehold.it/500x500 320w',
    title: 'Image 1',
    description: 'Description 1'
},
{
    src: 'http://placehold.it/300x500',
    srcset:'http://placehold.it/500x800 800w, http://placehold.it/300x500 320w',
    title: 'Image 2',
    description: 'Description 2'
},
{
    src: 'http://placehold.it/300x300',
    srcset:'http://placehold.it/500x500 800w, http://placehold.it/300x300 320w',
    title: 'Image 2',
    description: 'Description 2'
}]);

//trigger opening, which could be triggered to any DOM event
gallery.open(0);