CSS Grid Image Gallery with Pure JavaScript Lightbox

CSS Grid Image Gallery with Pure JavaScript Lightbox
Code Snippet:HES Gallery
Author: Artur Mędrygał
Published: January 19, 2024
Last Updated: January 22, 2024
Downloads: 6,041
License: MIT
Edit Code online: View on CodePen
Read More

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”.

Option Description, Default, Type
wrapAround This option lets create a loop on gallery images (start the first photo after reaching the last). Default: false, Type: Boolean.
true to enable.

HesGallery.setOptions({
   wrapAround: false,
});
showImageCount Show the number of the current images in the lightbox (like “1/6”). Default: true, Type: Boolean
false to disable.

HesGallery.setOptions({
   showImageCount: false,
});
disableScrolling Enable/disable window scrolling while the lightbox opens in the gallery. Default: false, Type: Boolean.

HesGallery.setOptions({
   disableScrolling: true,
});
animations Decide whether to show the animated popup for lightbox. Default: true, Type: Boolean.

HesGallery.setOptions({
   animations: true,
});
keyboardControl It Lets users control/slide images with keyboard arrow keys. Default: true, Type: Boolean.

HesGallery.setOptions({
   keyboardControl: true,
});
minResolution The minimum screen width (in px) for which the gallery will work. Default: 0, Type: Number.

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.

1 thought on “CSS Grid Image Gallery with Pure JavaScript Lightbox”

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...