Tiny Responsive Lightbox Gallery Plugin For jQuery - Viewbox

Tiny Responsive Lightbox Gallery Plugin For jQuery - Viewbox
File Size: 1.22 MB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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 responsivee nvironments.

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.11.3.min.js"></script>
<script src="jquery.viewbox.min.js"></script>

5. Optional settings to customize the plugin.

$('.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>',
  setTitle: true,
  margin: 20,
  resizeDuration: 300,
  openDuration: 200,
  closeDuration: 200,
  closeButton: true,
  navButtons: true,
  closeOnSideClick: true,
  nextOnContentClick: true
  
});

Change log:

2017-03-22


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