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.
HesGallery.setOptions({ wrapAround: false, }); |
showImageCount |
Show number of current image in lightbox (like “1/6”). Default: true, Type: Boolean
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, }); |