Smart Image Gallery

Creates a pop-up gallery when an image is clicked. Images are collected by a selector.

Live preview

Usage

1. place images on the page in any way. You need to make sure that there is a unique CSS selector to search them

2. Include Gallery. If you want use as:

   • via NPM install package

   npm i smart-image-gallery

   include

   import { SmartImageGallery } from "smart-image-gallery";

   • module copy file from dist folder to your project (full or minify version)

   <script type="module">
   // for minify version 
   // import { SmartImageGallery } from "./smartImageGallery.esm.mini.js";
   
   import { SmartImageGallery } from "./smartImageGallery.esm.js";
   </script>

   • iife-style (you need use global object SIG)

   <!--
       For minify version
       <script src="smartImageGallery.iife.mini.js"></script>
   -->
   <script src="smartImageGallery.iife.js"></script>

3. Setting up the gallery (object Settings) (default settings)

   const Settings = {
       //  selector a place for embedding a modal window
       containerSelector: "body", 
       // selector to search for displayed images
       imagesSelector: ".gallery img", 
       // flag for displaying the download button
       showDownloadButton: false,
       // flag for displaying copies of images (a copy is determined by an identical src)
       displayCopies: false,
       // transition speed (0 - no transitions)
       animationDuration: 0.3,
       // flag for initializing all handlers and events at once when creating
       init: true,
   }
   // if you use iife import
   // const Gallery = new SIG.SmartImageGallery( Settings );
   const Gallery = new SmartImageGallery( Settings );

   If there was no initialization during creation, you need to use the method init (Gallery.init())

4. If you want change styles, you can change classes before init

   const Gallery = new SmartImageGallery({ init: false, showDownloadButton: true });
   
   const {imageContainer, download} = Gallery.modalElements
   imageContainer.class += " my-addition-class-name"; // addition class for image container (add space before class name)
   download.class = "my-new-class-name"; // new class for download button
   
   Gallery.init();

   it has several modal blocks: - imageContainer: image container div - prev: previous image button - next: next image button - download: download image button

5. Done. When you click on the image, a window should appear.

Methods

method	action
hide()	hide modal
prev()	show previous img
next()	show next img
init()	initialization of handlers and events for script

Addition Events

On document.body script triggers the following events:

• smartgalleryopen: on open
• smartgalleryclose: on close Usage example:

document.body.addEventListener("smartgalleryopen", () =>
    ...
);

document.body.addEventListener("smartgalleryclose", () =>
    ...
);