Simple Gallery

A minimalistic image gallery slider and lightbox with mouse, touch and keyboard support.

simple-gallery-demo.webm

Photography under the Unsplash License by:

• Louis Pellissier
• Hannes Egler
• Takahiro Taguchi
• Forrest Cavale
• Hendrik Schuette
• Tobias Keller

Usage

• Import the script:

<script src="simple-gallery.js"></script>

• For images, which should receive lightbox functionality, set the class of the image to -lightbox:

<img src="image.avif" class="-lightbox">

• For a gallery slider, wrap the images into a div with the class -gallery. Additionally add -lightbox, if lightbox functionality is desired:

<div class="-gallery -lightbox">
    <img src="image1.avif">
    <img src="image2.avif">
    <img src="image3.avif">
</div>