Responsive Lightbox Gallery Plugin with jQuery and HTML5 - superbox

File Size: 4.52MB
Views Total: 5935
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Responsive Lightbox Gallery Plugin with jQuery and HTML5 - superbox

superbox is a responsive and lightweight jQuery plugin that allows to create a thumbnail gallery with expandable lightbox effect using jqueyr and html5 data-* attributes. The plugin will open a lightbox-like preview with a close button when clicking on a thumbnail and to show a larger image. 

Features:

  • Responsive layout
  • Smooth expanding effect
  • Keyboard navigation supported

See also:

How to use it:

1. Include superbox CSS to style your lightbox gallery

 <link href="css/superbox.css" rel="stylesheet">

2. Markup html structure

<div class="demo">
<div> <img src="img/superbox/superbox-thumb-1.jpg" data-img="img/superbox/superbox-full-1.jpg" alt=""> </div>
<div> <img src="img/superbox/superbox-thumb-2.jpg" data-img="img/superbox/superbox-full-2.jpg" alt=""> </div>
<div> <img src="img/superbox/superbox-thumb-3.jpg" data-img="img/superbox/superbox-full-3.jpg" alt=""> </div>
...
</div>

3. Include jQuery library and jQuery superbox on the page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script src="js/jquery.superbox.js"></script> 

4. Call the plugin with options

<script>
$(function() {
		
$('.demo').SuperBox({
    background : '#FF0000', // Lightbox background color. Default: #333
    border : 'white', // Larger image border. Default: #222
    height : 600, // Maximum larger image height. Default: 400
    view : 'landscape|square|portrait', // Sets ratio on smaller viewports. Default: landscape
    xColor : '#CCC', // Close button color. Default: #FFF
    xShadow : 'embed' // Close button shadow. Default: none

});
		
});
</script>

Change Log:

v3.0.9 (2013-05-09)

  • yui-compressed css
  • Changed image set to be more dynamic in orientation.

This awesome jQuery plugin is developed by seyDoggy. For more Advanced Usages, please check the demo page or visit the official website.