Tiny Responsive Lightbox Gallery Plugin For jQuery - Viewbox

Yet another jQuery image gallery/viewer plugin for displaying the large versions of the images in a lightbox as soon as you click on the thumbnail. 

Key features:

• Displays all full size images in a lightbox popup.
• You can navigate between images by clicking on the next / prev navigation arrows.
• The images will auto resize to fit within the viewport.
• Works perfectly on any responsive environments.
• Mobile-friendly. Allows you to switch between images with touch swipe.

Basic usage:

1. Load the viewbox.css in the document's head section. You can find all basic styles for the lightbox gallery in this CSS file.

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

2. Add a group of images to the gallery as follow. Note that all the images shown on a lightbox popup must have the same class name.

<a href="1.jpg" class="thumbnail">
  <img src="1-thumb.jpg" alt="">
</a>

<a href="2.jpg" class="thumbnail">
  <img src="2-thumb.jpg" alt="">
</a>

<a href="3.jpg" class="thumbnail">
  <img src="3-thumb.jpg" alt="">
</a>

3. Optionally, you're allowed to use a tag's title attribute to specify the image caption.

<a href="1.jpg" class="thumbnail" title="Caption 1">
  <img src="1-thumb.jpg" alt="">
</a>

4. Load jQuery JavaScript library and the jquery.viewbox.min.js script at the end of the document.

<script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="jquery.viewbox.min.js"></script>

5. Optional settings to customize the image viewer.

$('.thumbnail').viewbox({

  // template
  template: '<div class="viewbox-container"><div class="viewbox-body"><div class="viewbox-header"></div><div class="viewbox-content"></div><div class="viewbox-footer"></div></div></div>',

  // loading spinner
  loader: '<div class="loader"><div class="spinner"><div class="double-bounce1"></div><div class="double-bounce2"></div></div></div>',

  // show title
  setTitle: true,

  // margin in px
  margin: 20,

  // duration in ms
  resizeDuration: 300,
  openDuration: 200,
  closeDuration: 200,

  // show close button
  closeButton: true,

  // show nav buttons
  navButtons: true,

  // close on side click
  closeOnSideClick: true,

  // go to next image on content click
  nextOnContentClick: true,

  // enable touch gestures
  useGestures: true,

  // image extensions
  // used to determine if a target url is an image file
  imageExt: ['png','jpg','jpeg','webp','gif']
  
});

6. Control the image viewer programmatically

// open a specific image in the viewbox
instance.trigger('viewbox.open', index);

// close the viewbox
instance.trigger('viewbox.close');

// go to the next image
instance.trigger('viewbox.next');

// back to the previous image
instance.trigger('viewbox.prev');

Changelog:

2020-06-30

• Fixed sizing bug
• Added image extensions option

2018-12-19

• alternative title attribute

2018-11-15

• Added Full screen button.

2018-05-18

• v0.2.3

2018-05-08

• v0.2.2

2017-08-17

• JS update

---

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