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 :/" >

3. Finally initialize the plugin to active the gallery.




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

    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

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

   wrapAround: false,

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

   showImageCount: false,

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

   disableScrolling: true,

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

   animations: true,

Lets users to control / slide images with keyboard arrow keys. Default: true, Type: Boolean.

   keyboardControl: true,

The minimum screen width (in px) for which the gallery will work. Default: 0, Type: Number.

   minResolution: 0,

1 Comment

Leave a Reply

Your email address will not be published.


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