Gallery

Setup

To set up, here is the code

import {startup, Gallery} from 'js/mediaviewer.js';
startup(); //Loads up the library

/**
 * Creates an image gallery
 * @param {String} container Container element
 * @param {{images: string[], captions: string[], zoom: boolean, gap: string, autoResize: boolean, static: boolean}} config 
 * @param {{}} styles Style configuration
 * @param {boolean} [trigger=true] Active the event
 */
new Gallery('.demo', {
// configurations
},
{
// CSS Carousel variables
});

Configurations

Label	Type	Values	Default	Description	Required
images	String[]		[]	Inserts images from path into the gallery	✔️
captions	String[]		[]	Adds captions to the images	✖️
zoom	Boolean	true, false	false	Enable zoom function on image click	✖️
gap	String	{num}{css_measure}	0px	Adds gap to images	✖️
autoResize	Boolean	true, false	false	Automatically reajust image placements base on screen size	✖️
static	Boolean	true, false	false	Only closes when the x is pressed. zoom must be enabled	✖️

Styles

Variable	Name	Values	Default	Description
--gallery-max-cols	max-cols	size	300px	Maximum column size
--gallery-gap	gap	size	10px	Change the gap size
--gallery-captions-bg	captions-bg	Color	rgba(47, 47, 47, 0.6)	Captions background color
--gallery-captions-color	captions-color	Color	#FFF	Captions forecolor
--gallery-backdrop	backdrop	Color	rgba(47, 47, 47, 0.86)	Zoom backdrop background
--gallery-box-shadow	box-shadow	Color	rgba(173,168,173,1)	Box shadow

HTML

To operate in HTML, use the following code

<!--Replace ... with any of the valid configurations-->
<div media-gallery data-zoom data-autoResize ...>
    <img src="images/img1.jpg" alt="Rome" .../>
    <img src="images/img2.jpg" data-caption="Tiger" .../>
    <img src="images/img3.jpg" data-caption="Sailboat" .../>
</div>
<script type="module" src="autoloader.js"></script>