Full-page Responsive Image Lightbox Plugin For jQuery - Matchbox

Matchbox is a simple jQuery plugin that makes it easy to display a gallery of images in a full-page & responsive lightbox with navigation and image auto re-center support.

How to use it:

1. Add the jQuery javascript library together with JQuery matchbox' javascript and CSS in your document.

<link rel="stylesheet" href="matchbox.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="matchbox.jquery.js"></script>

2. The lightbox plugin has 2 ways of getting the full size image, the default method of adding a data-fullsize attribute containing the URL to the full image like in the following:

<img data-fullsize="large-1.jpg" src="thumb-1.jpg">
<img data-fullsize="large-2.jpg" src="thumb-2.jpg">
<img data-fullsize="large-3.jpg" src="thumb-3.jpg">
...

3. Initialize the plugin and done.

$.matchbox();

4. You can also have it get the images from any other attribute or from a custom function as the ones before are using:

<img src="./thumbs/thumb-1.jpg" class="thumbnail">
<img src="./thumbs/thumb-2.jpg" class="thumbnail">
<img src="./thumbs/thumb-3.jpg" class="thumbnail">
...

5. Initialize the lightbox plugin with options.

$.matchbox({
'id':'function_matchbox',
'selector':'img.thumbnail',
'theme': 'light',
'source':function(img){
return $(img).attr('src').replace('/thumbs/','/');
}
});

6. All the available settings.

• 'id': 'matchbox': The ID used for the matchbox display overlay
• 'selector': '[data-fullsize]': There selector used determine if item should open a model
• 'selectedClass': 'matchbox-selected': Class added to the currently selected image, if this is left blank it will not being able to automatically go between images
• 'source': 'data-fullsize': The attribute it will load the full size image from
• 'theme': 'dark': The theme of the lightbox, light, dark, possibly others in the future
• 'showOpenInNewWindow': true: determines if we remove the open in new window code
• 'showNavigationArrows': true: determines if we remove next/previous image arrows
• 'stopPropagation': true: As the name would suggest, it stops the click even propagation
• 'preventDefault': true: As the name would suggest, it prevents the default click action
• 'debugMessages': false: Will output messages that may help with troubleshooting to the console log, if there is a console log.
• 'frameworkPlaced': false: check to make sure the framework as not already been set before adding it, in case another script re-calls document.ready()
• 'isLoading': false // Keeps track of if an image is loading.

Change log:

v1.1.0 (2014-08-03)

• Added the navigationLoop and a minified CSS file. 
• Fixed a bug where opening a lightbox for the same image twice in a row would cause it to not load the second time and one where the loadingHTML would not show after the first load. 
• Moved the example into a dedicated directory, and cleaned up the unminimized script a bit making it easier to follow.

---

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