Minimal Responsive Image Lightbox Plugin with jQuery - n9xtbox

Minimal Responsive Image Lightbox Plugin with jQuery - n9xtbox
File Size: 9.62 KB
Views Total: 1112
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="//"></script>
<script src="src/n9xtbox.js"></script>

4. Call the plugin on the image and done.

$(document).ready(function() {

5. A few options to customize the image lightbox.

  // 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:


  • Added error handling for broken images, phew


  • 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.