CSS Grid Image Gallery with Pure JavaScript Lightbox

The HesGallery is a responsive, cross-platform, customizable, and dependency-free CSS grid powered image gallery plugin. It uses pure CSS and JavaScript to arrange your photos in a justified (responsive) grid layout.
When the user clicks on a single image, it shows in the lightbox. Users can slide the next and the previous image with buttons available in a lightbox.

Main Features

• Fully responsive and mobile-friendly.
• Keyboard navigation supported.
• No need for an external library.
• Animated popup lightbox to show images on click.
• Display photo caption and counting for photos. (Such as “1/5”)
• Close, next and previous buttons.

How to Build CSS Grid Image Gallery

1. First of all load Hes Gallery CSS and JavaScript file into your HTML document’s head tag.

<!-- Hes Gallery CSS -->
<link rel="stylesheet" href="src/hes-gallery.css">

<!-- Hes Gallery Js -->
<script src="src/hes-gallery.js"></script>

2. Now, create a basic markup for the gallery and put your image links into it.

<div class="hes-gallery" data-wrap="true" data-img-count="true">
            <img src="img/uno.jpeg" alt="image1" data-subtext="kociak" data-alt="kociak">
            <img src="img/dos.jpeg" alt="image2" data-subtext="Kolejny kociak">
            <img src="img/tres.jpeg" alt="image3" data-subtext="Trzeci kociak ^^" >
            <img src="img/cuatro.jpeg" alt="image4" data-subtext="Leci czwart" data-alt="co jeest" >
            <img src="img/cinto.jpeg" alt="image5" data-subtext="Daleeeej" >
            <img src="img/seis.jpeg" alt="image6" data-subtext="Kozaaak" >
            <img src="img/siete.jpeg" alt="image7" data-subtext="Slodziaaaaak" >
            <img src="img/ocho.jpeg" alt="image8" data-subtext="Ostatni kociak :/" >
</div>

3. Finally initialize the plugin to activate the gallery.

<script>

HesGallery.init();

</script>

4. If you want to customize this gallery plugin, you can use HesGallery.setOptions() function to pass custom values in configure options.

HesGallery.setOptions({
    wrapAround: true,
    disableScrolling: true
})

Advanced Configuration Options for Hes Gallery

The following are some advanced configuration options to create/customize “Hes Gallery”.

HesGallery.setOptions({
   wrapAround: false,
});

HesGallery.setOptions({
   showImageCount: false,
});

HesGallery.setOptions({
   disableScrolling: true,
});

HesGallery.setOptions({
   animations: true,
});

HesGallery.setOptions({
   keyboardControl: true,
});

HesGallery.setOptions({
   minResolution: 0,
});

That’s all! hopefully, you have successfully created a grid image gallery. If you have any questions or suggestions, feel free to comment below.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.