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"
     data-wrap="true"
     data-img-count="3">
  <img src="1.jpg" 
       alt="image1" 
       data-subtext="Descrition 1"  
       data-alt="Alt 1">
  <img src="2.jpg" 
       alt="image2" 
       data-subtext="Descrition 2"  
       data-alt="Alt 2"
       data-disabled="true">
  <img src="3.jpg" 
       alt="image3" 
       data-subtext="Descrition 3"  
       data-alt="Alt 3">
</div>

Decide whether to display the count in the gallery popup.

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

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

HesGallery.setOptions({
  // 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
HesGallery.show(m, n) 
// goes to next
HesGallery.next()
// backs to previous
HesGallery.prev()
// hides the gallery
HesGallery.hide()

Changelog:

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

01/13/2019

• Code refactor