Mobile-compatible Responsive Gallery – HesGallery

Category: Gallery , Javascript , Modal & Popup | June 23, 2019
Author: demtario
Views Total: 3,616 views
Official Page: Go to website
Last Update: June 23, 2019
License: MIT


Mobile-compatible Responsive Gallery – HesGallery


HesGallery is a lightweight, responsive, mobile-friendly JavaScript photo gallery & image lightbox plugin for lifestyle, portfolio, travel, fashion, art, photography and any other kind of amazing websites and blogs.

The plugin displays a group of images as a gallery popup where the users are able to navigate between images by clicking the navigation arrows (desktop) or by tapping the images (mobile).

Licensed under the CC BY-NC-ND 4.0.

How to use it:

To get started, insert the HesGallery plugin’s files into the document.

<link rel="stylesheet" href="hes-gallery.css">
<script src="hes-gallery.js"></script>

Add the images to the gallery as follows. Available data attributes:

  • data-subtext: image caption
  • data-alt: alternative text
  • data-disabled: disable this image
  • data-fullsize: full size
  • data-wrap: infinite loop
  • data-img-count: the number of images
<div class="hes-gallery"
  <img src="1.jpg" 
       data-subtext="Descrition 1"  
       data-alt="Alt 1">
  <img src="2.jpg" 
       data-subtext="Descrition 2"  
       data-alt="Alt 2"
  <img src="3.jpg" 
       data-subtext="Descrition 3"  
       data-alt="Alt 3">

Decide whether to display the count in the gallery popup.

<div class="hes-gallery" data-img-count="false">

That’s it. You can override the default settings to customize the gallery.


  // disable scrolling when the popup is activated
  disableScrolling: false,

  // self-hosted styles
  hostedStyles: false,

  // enable/disable animation
  animations: true,

  // enable/disable keyboard navigation
  keyboardControl: true,

  // disable the plugin when the screen size is smaller than this value
  minResolution: 0,

  // enable/disable infinite loop
  wrapAround: false,

  // show/hide image count
  showImageCount: true


API methods.

// Shows n photo from m gallery, n) 

// goes to next

// backs to previous

// hides the gallery


v1.4.11 (06/23/2019)

  • Fixed data-wrap & data-img-count attributes

v1.4.8 (06/16/2019)

  • Added IE support

v1.4.7 (05/27/2019)

  • Fix bad subtitle position

v1.4.6 (03/31/2019)

  • minor changes


  • Code refactor

You Might Be Interested In:

3 thoughts on “Mobile-compatible Responsive Gallery – HesGallery

  1. Aleksandar

    dude… your css dude. what is it aiming? fe, u have id of hgallery, but it is nowhere to be found in html???


Leave a Reply