Mobile-compatible Responsive Gallery – HesGallery

Category: Gallery , Javascript , Modal & Popup | August 5, 2018
Author: demtario
Views Total: 867
Official Page: Go to website
Last Update: August 5, 2018
License: MIT

Preview:

Mobile-compatible Responsive Gallery – HesGallery

Description:

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:

08/05/2018

  • update

You Might Be Interested In:

Leave a Reply