Minimal Responsive Image Lightbox Plugin with jQuery - n9xtbox
File Size: | 9.62 KB |
---|---|
Views Total: | 1149 |
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.