Storm Modal Gallery


Modal gallery/lightbox.

Example

https://stormid.github.io/storm-modal-gallery

Usage

A modal gallery can be created with DOM elements, or programmatically created from a JS Object

To create from HTML:
``


• Image one


• Image two


`

CSS
`
.modal-gallery__outer {
display: none;
opacity: 0;
position: fixed;
overflow: hidden;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000000;
background-color: rgba(0,0,0,.9);
transition: opacity .5s ease;
}
.modal-gallery__outer.active {
display: block;
opacity: 1;
}
.modal-gallery__img-container {
text-align:center;
}
.modal-gallery__img {
margin:80px auto 0 auto;
max-width:80%;
max-height: 80vh;
}
.modal-gallery__item {
position: fixed;
top:0;
left:0;
right:0;
bottom:0;
opacity:0;
visibility:hidden;
}
.modal-gallery__item.active {
opacity:1;
visibility:visible;
}
.modal-gallery__next {
position: fixed;
bottom:50%;
right:25px;
}
.modal-gallery__previous {
position: fixed;
bottom:50%;
left:25px;
}
.modal-gallery__close {
position: fixed;
top:15px;
right:25px;
}
.modal-gallery__close:hover svg,
.modal-gallery__previous:hover svg,
.modal-gallery__next:hover svg{
opacity:.8
}
.modal-gallery__total {
position: absolute;
bottom:25px;
right:25px;
color:#fff
}
.modal-gallery__details {
position: fixed;
bottom:0;
left:120px;
right:120px;
padding:0 0 40px 0;
color:#fff;
}
.loading:after {
color:#fff;
z-index:1;
width:100%;
position: fixed;
display: block;
text-align:center;
top:45%;
content:'Loading...'
}
.gallery__item {
display: inline-block;
}
`

JS
`
npm i -S storm-modal-gallery
`
either using es6 import
`
import ModalGallery from 'storm-modal-gallery';

ModalGallery.init('.js-modal-gallery');
`
or aynchronous browser loading (use the .standalone version in the /dist folder)
`
import Load from 'storm-load';

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

To create from pure JS and triggered from any event:
`
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/300x800',
srcset:'http://placehold.it/500x800 800w, http://placehold.it/300x500 320w',
title: 'Image 2',
description: 'Description 2'
}]);

//e.g. Open the gallery by clicking on a button with the className 'js-modal-gallery__trigger'
document.querySelector('.js-modal-gallery__trigger').addEventListener('click', gallery.open.bind(gallery, 0));
`

Options


`
{
fullscreen: false,
preload: false,
totals: true //show current and totalnumber of images
scrollable: false, //add className to apply CSS to support scrollable content
single: false // separate single images, do not collect into a gallery
}
`

e.g.
`
ModalGallery.init('.js-modal-gallery', {
fullscreen: true
});
`

Tests


`
npm run test
``

Browser support

This is module has both es6 and es5 distributions. The es6 version should be used in a workflow that transpiles.

This module depends upon Object.assign available in all evergreen browsers. ie9+ is supported with polyfills, ie8+ will work with even more polyfills for Array functions and eventListeners.

Dependencies

None

License

MIT