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 Preview

CSS Grid Image Gallery with Pure JavaScript Lightbox

How to start using jQuery?

More jQuery Top, Best and New Plugins

Top 100 jQuery Plugins

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

Demo Download

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. EXAMPLE HesGallery.setOptions({ wrapAround: false, });
`showImageCount`	Show number of current image in lightbox (like “1/6”). Default: true, Type: Boolean false to disable. EXAMPLE HesGallery.setOptions({ showImageCount: false, });
`disableScrolling`	Enable / disable window scrolling while lightbox open in gallery. Default: false, Type: Boolean. EXAMPLE HesGallery.setOptions({ disableScrolling: true, });
`animations`	Decide weather to show animated popup for lightbox. Default: true, Type: Boolean. EXAMPLE HesGallery.setOptions({ animations: true, });
`keyboardControl`	Lets users to control / slide images with keyboard arrow keys. Default: true, Type: Boolean. EXAMPLE HesGallery.setOptions({ keyboardControl: true, });
`minResolution`	The minimum screen width (in px) for which the gallery will work. Default: 0, Type: Number. EXAMPLE HesGallery.setOptions({ minResolution: 0, });