Light, dependency free script creating a responsive gallery – HesGaller

Light, dependency free script creating a responsive gallery. 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. Attach scripts to page You can use a hosted version by hooking this script or import it locally by downloading a package of files, but remember to attach a CSS style sheet and disable the auto-hooking of styles in the options.


Include the plugins library.

<script src=""></script>


Create simple html gallery

<div class="hes-gallery">
    <img src="image1.jpg" alt="image1" data-subtext="Subtext" data-alt="Alternative text" />
    <img src="image2.jpg" alt="image2" data-subtext="Second subtext" />
    <img src="image3.jpg" alt="image3" data-subtext="Subtext" />
    <img src="image4.jpg" alt="image4" data-subtext="Subtext" />

Following data attribute you can use to set custom parameter

  • 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


If you want, you can modify the gallery options to make it work better to you by using function HesGallery.setOptions()

    wrapAround: true,
    disableScrolling: true

Global options:

Parameter Default Description
wrapAround false Create loop on gallery, you can go from last photo to first with one click
showImageCount true Show number of current photo (for example “1/5”)
disableScrolling false Disable scrolling when gallery is on
hostedStyles true Automatically attaches a style sheet to the source on (turn off if you want to put hes-gallery on your own server)
animations true Using animations in gallery
keyboardControl true Keyboard control in galleries
minResolution 0 The minimum screen width for which the gallery will work (in px)

Available functions
Some of functions which you can use to manage the gallery

Function Description
HesGallery.init() Reloads the gallery in case when for example content of gallery container has changed and we want to have actual images in gallery, n) Show n photo from m gallery Show next photo
HesGallery.prev() Show previous photo
HesGallery.hide() Hide gallery
HesGallery.setOptions() Allows you to modify the gallery options (more above)

See live demo and download source code.


This awesome plugin is developed by demtario. Visit their official github repository for more information and follow for future updates.