CSS Grid Image Gallery with Pure JavaScript Lightbox

June 2, 2019 admin Gallery 0

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

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. 

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

Related jQuery Plugins: