Modern Modal Image Gallery in Plain JavaScript – SWG

Preview:

Description:

SenangWebs Gallery (SWG) is a Vanilla JavaScript library that creates a modern, responsive, mobile-friendly, high-performance gallery lightbox from a group of images embedded within the document.

It presents images in a clean, organized, and interactive modal popup where you can navigate between those images with nav links or next/prev arrows.

In addition, this gallery lightbox supports image captions, smooth slide/fade transitions, and counter displays to track image positions. It is fully customizable via data attributes, and works across all modern browsers without external dependencies.

How to use it:

1. Install & download SenangWebs Gallery.

npm install senangwebs-gallery

2. Import the necessary CSS and JavaScript files into your project.

<link rel="stylesheet" href="/path/to/swg.css">
<script src="/path/to/swg.js"></script>

3. Add your images to the web page and configure the gallery lightbox using HTML data attributes.

• The main container needs the data-swg attribute to mark it as a gallery.
• Use data-swg-page to enable a counter display showing the current image position (e.g., “2 / 5”).
• Each gallery item should have the data-swg-item attribute, and you can add captions with data-swg-caption.

<div data-swg data-swg-page>
  <div data-swg-item data-swg-caption="Image 1">
    <img src="/path/to/1.jpg" alt="Image 1">
  </div>
  <div data-swg-item data-swg-caption="Image 2">
    <img src="/path/to/2.jpg" alt="Image 2">
  </div>
  <div data-swg-item data-swg-caption="Image 3">
    <img src="/path/to/3.jpg" alt="Image 3">
  </div>
  ... more items here ...
</div>

How it works:

When creating a new SenangWebsGallery instance, it initializes by finding all elements with the data-swg-item attribute within the gallery container. It stores each item’s image source and caption. The library then creates the modal structure with navigation buttons, a close button, an image container, and a caption area. If the data-swg-page attribute is present, it also adds a counter.

Event listeners are attached to each gallery item to open the modal when clicked. Inside the modal, event listeners handle closing the modal, navigating to the previous and next images, and keyboard controls (Escape, left arrow, right arrow). When you click an item, the openModal function displays the modal, sets the current image, and updates the caption and counter. The updateImage function loads the correct image and caption based on the current index.

Navigation functions, showPrevious and showNext, handle transitioning between images. They include an animation effect by adding and removing CSS classes (slide-left, slide-right). The animateSlide function manages these animations and provides smooth transitions between images. The library also handles edge cases, such as reaching the first or last image in the gallery, by looping back to the opposite end.

Finally, the SenangWebsGallery initializes the gallery lightbox for each element with the data-swg attribute when the DOM content is loaded.