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", () =>
    ...
);