Light, dependency free script creating a responsive gallery – HesGaller

by Posted on

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.
javascript-image-gallery

Libraries

Include the plugins library.

<script src="https://api.heseya.com/hesgallery/hes-gallery.min.js"></script>



HTML

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" />
</div>

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



JS

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

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 api.heseya.com (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
HesGallery.show(m, n) Show n photo from m gallery
HesGallery.next() 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.

DEMO | DOWNLOAD

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


Published by admin