Minimal Responsive Image Lightbox Plugin with jQuery - n9xtbox

n9xtbox is a lightweight, high performance, fully responsive image lightbox plugin that supports auto resize / scale to fit the viewport when the lightbox is attached.

How to use it:

1. Add the jQuery n9xtbox plugin's CSS file in the head section of your document.

<link href="src/n9xtbox.css" rel="stylesheet">

2. Insert an image into your document. The plugin will generate a caption bar with custom text specified in the img's alt atribute.

<img src="1.jpg" class="nxtbox" alt="This is an image">

3. Add jQuery library and the the jQuery n9xtbox plugin's JS file at the end of the document.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="src/n9xtbox.js"></script>

4. Call the plugin on the image and done.

$(document).ready(function() {
  $('img.nxtbox').nxtBox();
});

5. A few options to customize the image lightbox.

$('img.nxtbox').nxtBox({
  
  // Enable / Disable scrollbar when the lightbox is attached
  'scrollbar': true,

  // the opacity level of the lightbox overlay
  'opacity': 0.8,

  // click the image to close the lightbox
  'invertclose': false
  
});

Change log:

2015-05-07

• Added error handling for broken images, phew

2015-05-06

• added thumbnail navigation
• added gallery lightbox support
• update demo
• added image counter for gallerys

 

---

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