Fullscreen Responsive jQuery Lightbox Gallery Plugin - simpleGallery

File Size: 4.41 KB
Views Total: 2423
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Fullscreen Responsive jQuery Lightbox Gallery Plugin - simpleGallery

Just another jQuery gallery plugin which allows the visitor to navigate between a group of images in a fullscreen, responsive lightbox view. With support for prev/next arrows navigation, close button and image loader.

Basic Usage:

1. Include the simpleGallery.css in the header of the document.

<link href="simpleGallery.css" rel="stylesheet">

2. Include jQuery library and the jQuery simpleGallery plugin in the footer.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="jquery.simpleGallery.js"></script>

3. Insert a group of thumbnails into your document and use data-full attribute to specify the paths to original images.

<div class="gallery">
  <img src="thumb-1.jpg" data-full="large-1.jpg" alt="img-1">
  <img src="thumb-2.jpg" data-full="large-2.jpg" alt="img-2">
  <img src="thumb-3.jpg" data-full="large-3.jpg" alt="img-3">
  <img src="thumb-4.jpg" data-full="large-4.jpg" alt="img-4">
  <img src="thumb-5.jpg" data-full="large-5.jpg" alt="img-5">
  ...
</div>

4. Call the function on the parent element to initialize the lightbox gallery.

$('.gallery').gallery();

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