Responsive jQuery Photo Album Gallery Plugin - jsGallery
File Size: | 221 KB |
---|---|
Views Total: | 4709 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.