Lightweight Image Gallery & Lightbox Plugin - Smooth Gallery

Smooth Gallery is a really simple jQuery plugin for creating a neat, clean, responsive and paginatable photo gallery (thumbnail grid) with image lightbox integrated.

How to use it:

1. Include jQuery library and the jQuery smooth gallery plugin's CSS and JavaScript files on your web page.

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

2. Include the jQuery easing plugin for additional easing support.

<script src="jquery.easing.min.js"></script>

3. Create a photo gallery following the html structure like this:

<div class="sg">
  <div class="sg-item">
    <a href="1.jpg" title="Long Caption 1">
      <img src="1_thumb.jpg">
    </a> <br>
    PHOTO TITLE  1
  </div>
  <div class="sg-item">
    <a href="2.jpg" title="Long Caption 2">
      <img src="2_thumb.jpg">
    </a> <br>
    PHOTO TITLE  2
  </div>
  <div class="sg-item">
    <a href="3.jpg" title="Long Caption 3">
      <img src="3_thumb.jpg">
    </a> <br>
    PHOTO TITLE  3
  </div>
  ...
</div>

4. Add a pagination for the photo gallery.

<div class="sg-paginate">
  <a href="#" class="sg-up">▲</a>
  <a href="#" class="sg-down">▼</a>
</div>

5. Initialize the plugin and specify the maximum number of rows to be displayed in the gallery.

$(document).smoothGallery({
  visibleRows: 2,
});

6. More customization options.

$(document).smoothGallery({

  // animation speed
  animSpeed: 180,

  // transition delay
  delaySpeed: 50,

  // visible rows
  visibleRows: 2,

  // easing effect
  animEasing: 'easeOutQuart'
  
});

---

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