Simplist jQuery Responsive Image Lightbox Plugin - Argonbox
File Size: | 34 KB |
---|---|
Views Total: | 1654 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Argonbox is a really simple jQuery lightbox plugin that displays a gallery of images in a responsive modal window with image loader support.
How to use it:
1. Include the argonbox.css
in the head section and the jquery.argonbox.js
at the bottom but after jQuery library.
<link href="css/style.argonbox.css" rel="stylesheet"> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <script src="js/jquery.argonbox.js"></script>
2. Insert a gallery of images into a DIV container.
<div class="argonbox"> <a href="large-1.jpg" title="Image 1"><img src="thumb-1.jpg" alt="Image 1"></a> <a href="large-2.jpg" title="Image 2"><img src="thumb-2.jpg" alt="Image 2"></a> <a href="large-3.jpg" title="Image 3"><img src="thumb-3.jpg" alt="Image 3"></a> ... </div>
3. Initialize the plugin to display large images in a responsive lightbox with next/prev controls that act like a gallery lightbox or lightbox slider.
$(function() { "use strict"; $(".argonbox a").click(function() { $(this).argonBox({ "duration": "fast" }); return false; }); });
4. Default options.
'duration': 'fast', // animation speed 'opacity': '0.9', // opacity level of the lightbox overlay 'bootstrap': false, // enable bootstrap support 'navigation': true, // displays prev/next controls.
This awesome jQuery plugin is developed by BjornHansson. For more Advanced Usages, please check the demo page or visit the official website.