Simplist jQuery Responsive Image Lightbox Plugin - Argonbox

File Size: 34 KB
Views Total: 1651
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Simplist jQuery Responsive Image Lightbox Plugin - Argonbox

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.