Minimal Responsive Image Lightbox Plugin with jQuery - n9xtbox

Minimal Responsive Image Lightbox Plugin with jQuery - n9xtbox
File Size: 9.62 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.