Responsive jQuery Photo Album Gallery Plugin - jsGallery

The jsGallery jQuery plugin helps you generate a responsive gallery to manage and present a collections of photos with albums support. 

Features:

• Click on the header tabs to switch between albums.
• Click on the thumbnails in the sidebar to switch between photos.
• You can also switch between images in the same albums via right / left arrows.
• Auto jump to the next (prev) album when you reach the last (first) photo.
• Image lazy loading.

How to use it:

1. To use this gallery plugin, you must include jQuery library and the jQuery jsGallery plugin's files on the webpage as follows:

<link rel="stylesheet" href="jsGallery.css">
<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="jsGallery.js"></script>

2. Insert and organize your photos using the data attributes as shown below.

• data-album-name: album name
• data-src: path to the original image
• data-thumbnail: path to the thumbnail image
• data-alt: image description
• data-title: gallery title

<div id="jsGallery" style="display: none;" data-title="This is a gallery.">
  <span data-album-name="Album 1" data-src="1.jpg" data-thumbnail="1-thumb.jpg" data-alt="Img Alt"></span>
  <span data-album-name="Album 1" data-src="2.jpg" data-thumbnail="2-thumb.jpg" data-alt="Img Alt"></span>
  <span data-album-name="Album 2" data-src="3.jpg" data-thumbnail="3-thumb.jpg" data-alt="Img Alt"></span>
  <span data-album-name="Album 2" data-src="4.jpg" data-thumbnail="4-thumb.jpg" data-alt="Img Alt"></span>
  <span data-album-name="Album 3" data-src="5.jpg" data-thumbnail="5-thumb.jpg" data-alt="Img Alt"></span>
  <span data-album-name="Album 3" data-src="6.jpg" data-thumbnail="6-thumb.jpg" data-alt="Img Alt"></span>
</div>

3. Initialize the gallery plugin on document ready. That's it.

$('#jsGallery').jsGallery();

4. Sometimes you might need a trigger button to toggle the photo gallery.

<button id="showGal">Show Gallery</button>

var gal = $('#jsGallery').jsGallery();
gal.jsGallery('show', 'Album 2', 1);

5. Possible plugin options with default values.

$('#jsGallery').jsGallery({

  // data attributes
  galleryTitleAttr: 'data-title',
  albumNameAttr: 'data-album-name',
  imageLinkAttr: 'data-src',
  thumbnailLinkAttr: 'data-thumbnail',
  altTextAttr: 'data-alt',

  // show albums
  showAlbums: true,

  // default album name
  defaultAlbumName: 'Default Album',

  // Jump to next/prev album when reach last/first item of the album
  connectAlbums: true,

  // z-index level
  zIndex: 100,

  // debug mode
  debug: true,

  // where to append the gallery
  galleryParent: 'body',

  // callback functions
  onInit: function() {},
  onDestroy: function() {}
  
});

6. API methods.

var gal = $('#jsGallery').jsGallery();

// show the gallery
// parameters: albumName (optional), imageIndex (optional)
gal.jsGallery('show', 'Album 2', 1);

// hide the gallery
gal.jsGallery('hide');

// show next image
gal.jsGallery('showNext');

// show prev image
gal.jsGallery('showPrev');

// destroy the gallery
gal.jsGallery('destroy');

// Opens given album and then executes given callback function
gal.jsGallery('selectAlbum', albumName, callback);

---

This awesome jQuery plugin is developed by anuragsn7. For more Advanced Usages, please check the demo page or visit the official website.