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 justified (responsive) grid layout.

When user click on a single image, it shows in light-box. User can slide next and previous image with buttons available in lightbox.

Plugin Overview

Plugin: HES Gallery
Author: Artur Mędrygał
Licence: MIT Licence
Published: June 2, 2019
Repository: Fork on GitHub
Dependencies: Dependency Free!
File Type: zip archive (Images, HTML, CSS & JavaScript )
Package Size: 2.23 MB

Main Features

  • Fully responsive and mobile friendly.
  • Keyboard navigation supported.
  • No need any 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 button.

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 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 active 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
})

Advance Configuration Options for Hes Gallery

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

Option Description, Default, Type
wrapAround

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

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

Show number of current image in lightbox (like “1/6”). Default: true, Type: Boolean
false to disable.

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

Enable / disable window scrolling while lightbox open in gallery. Default: false, Type: Boolean.

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

Decide weather to show animated popup for lightbox. Default: true, Type: Boolean.

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

Lets users to 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,
});