Fullpage Responsive jQuery Gallery Lightbox Plugin - sumogallery

sumogallery is a lightweight jQuery gallery lightbox plugin that has the ability to display all the grouped images in a fullscreen, responsive lightbox popup gallery with support for thumbnail / arrows navigation.

How to use it:

1. Add references to jQuery library and the jQuery sumogallery plugin's stylesheet & CSS into your document.

<link href="sumogallery.css" rel="stylesheet">
<script src="jquery.min.js"></script>
<script src="jquery.sumogallery.js"></script>

2. Add thumbnails into your document following the markup structure as follow.

• data-sgallery: image group ID.
• data-full: path to the full sized images
• data-thumb: path to the thumbnails

<img data-sgallery="group1" 
     title="Title 1" 
     data-full=1_large.jpg" 
     data-thumb="1_thumbnail.jpg" 
     src="1_thumbnail.jpg"
>

<img data-sgallery="group1" 
     title="Title 2" 
     data-full=2_large.jpg" 
     data-thumb="2_thumbnail.jpg" 
     src="2_thumbnail.jpg"
>

<img data-sgallery="group1" 
     title="Title 3" 
     data-full=3_large.jpg" 
     data-thumb="3_thumbnail.jpg" 
     src="3_thumbnail.jpg"
>

3. Build the mark structure for the gallery lightbox with a thumbnail navigation.

<div class="SumoGallery" style="display:none;">
  <div class="Sheader">
    <p>Gallery Title</p><a>&times;</a>
  </div>
  
  <div class="Sbody">
  <a><img src="1_large.jpg" ></a>
  <a><img src="2_large.jpg" ></a>
  <a class="sel"><img src="3_large.png" ></a>
  </div>
  
  <a class="Sarrow l">&#10092;</a>
  <a class="Sarrow r">&#10093;</a>
  
  <div class="Sfooter">
    <ul class="Sthumbnails">
    <li><a style="background-image:url('1_thumbnail.jpg')"></a></li>
    <li><a style="background-image:url('2_thumbnail.jpg')" ></a></li>
    <li class="sel"><a style="background-image:url('3_thumbnail.png')" ></a></li>
    </ul>
  </div>
</div>

4. Global settings.

// attrribute on image to be looked by plugin. 
// by which we can set group name.sattr: 'data-sgallery', 

// display image counts on bottom right
showImgCount: true,       

// display thumbnail navigation
showThumbs: false

---

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