Lightweight Image Gallery With Lightbox Popup – havLightbox

HavLightbox is a lightweight and touch-friendly gallery lightbox JavaScript plugin that allows you to create image galleries with a lightbox overlay.

Visitors can click on thumbnails to view larger versions of the images, and navigate through them using next/previous buttons or by clicking on thumbnails displayed at the bottom of the lightbox.

How to use it:

1. Download and add the minified JavaScript and CSS from the dist folder to your project.

<link rel="stylesheet" href="/dist/css/havlightbox.min.css">
<script src="/dist/js/havlightbox.min.js"></script>

2. Create a container with the class havlightbox-gallery and add your images inside it. Use the src attribute for the thumbnail image and the data-havlightbox-image attribute for the full-size image.

<div class="havlightbox-gallery">
  <img 
    class="havlightbox-thumbnail" 
    src="thumbnail-1.webp" 
    data-havlightbox-image="full-1.webp"
    alt="Image Alt 1" />
  <img 
    class="havlightbox-thumbnail" 
    src="thumbnail-2.webp" 
    data-havlightbox-image="full-2.webp"
    alt="Image Alt 2" />
  <img 
    class="havlightbox-thumbnail" 
    src="thumbnail-3.webp" 
    data-havlightbox-image="full-3.webp"
    alt="Image Alt 3" />
  ... more image here ...
</div>

3. Build the HTML for the lightbox itself. This includes elements for the image counter, close button, image container, caption, thumbnail selection, and navigation buttons.

<div id="havLightbox" class="havlightbox">
  <div id="havLightboxImageCounter" class="havlightbox-image-counter"></div>
  <span class="havlightbox-close">&times;</span>
  <div class="havlightbox-image-container">
    <img src="" alt="havLightbox Image" id="havLightboxImg">
    <div id="havLightboxCaption" class="havlightbox-caption"></div>
    <div id="havLightboxThumbnailSelection" class="havlightbox-thumbnail-selection"></div>
  </div>
  <button id="havLightboxPrevBtn" class="havlightbox-prev-button">&#10094;</button>
  <button id="havLightboxNextBtn" class="havlightbox-next-button">&#10095;</button>
</div>

Changelog:

04/12/2025

• Added swipe functionality, some code refactoring

10/30/2024

• Improved mobile compatibility, removed selection class when closing lightbox

06/16/2024

• Added thumbnail selection wrapping

The post Lightweight Image Gallery With Lightbox Popup – havLightbox appeared first on CSS Script.