ImageLightbox

Basic Gallery

Click any image to open the lightbox. Use arrow keys or navigation buttons to browse.

Gallery with Thumbnails

This gallery shows thumbnails at the bottom for quick navigation.

High-Zoom Images

These images support high zoom levels. Use mouse wheel, zoom buttons, or pinch gestures.

Slideshow Mode

Auto-advancing slideshow with play/pause controls.

Individual Images

These images open individually, not as part of a group.

Portrait Mode

Single image without grouping

Landscape Mode

Standalone landscape image

Abstract Art

Zoomable abstract image

Custom Configuration

Images with specific custom settings applied via data attributes.

No Navigation

Navigation arrows and keyboard controls disabled

Custom Config

No Zoom

Zoom controls and gestures disabled

No Zoom

Code Examples

<img src="image1.jpg"
     data-lightbox="gallery"
     data-lightbox-caption="Caption text"
     alt="Image 1">

<img src="image2.jpg"
     data-lightbox="gallery"
     data-lightbox-caption="Another caption"
     alt="Image 2">

// Basic initialization
const lightbox = new ImageLightbox();

// With custom options
const lightbox = new ImageLightbox({
    navigation: true,
    thumbnails: true,
    zoom: true,
    maxZoom: 4,
    slideshow: false
});

<img src="detail.jpg"
     data-lightbox="zoom-gallery"
     data-lightbox-max-zoom="5"
     data-lightbox-zoom-step="0.25"
     alt="High detail image">

<img src="slide1.jpg"
     data-lightbox="slideshow"
     data-lightbox-slideshow="true"
     data-lightbox-slideshow-speed="4000"
     alt="Slide 1">