Categories: CSSScriptWeb Design

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.

Table of Contents

Toggle

How to use it:

1. Download and add the minified JavaScript and CSS from the dist

Sponsored
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

Sponsored
  • 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.

rssfeeds-admin

Share
Published by
rssfeeds-admin

Recent Posts

World of Warcraft: Midnight Review So Far

At the very outset of World of Warcraft’s Midnight expansion, we are summoned by an…

33 minutes ago

World of Warcraft: Midnight Review So Far

At the very outset of World of Warcraft’s Midnight expansion, we are summoned by an…

34 minutes ago

Legion RTX 5070 Ti Gaming PCs Start at Just $1,805 During Lenovo’s Weekend Sale

Nowadays it's quite difficult to find an RTX 5070 Ti prebuilt for under $2,000, and…

34 minutes ago

The Trump phone sure looks a lot like this HTC handset

The HTC U24 Pro may not be gold, but its design is otherwise awfully similar…

1 hour ago

CISA is getting a new acting director after less than a year

The US Cybersecurity and Infrastructure Security Agency (CISA), which is part of the Department of…

1 hour ago

AI deepfakes are a train wreck and Samsung’s selling tickets

On Thursday morning, I attended a Q&A panel with four top Samsung smartphone executives. Until…

1 hour ago

This website uses cookies.