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.
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.
This awesome plugin is developed by demtario. Visit their official github repository for more information and follow for future updates.
