Full-page Responsive Image Lightbox Plugin For jQuery - Matchbox

Full-page Responsive Image Lightbox Plugin For jQuery - Matchbox
File Size: 8.01 MB
Views Total: 1373
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

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.


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.

'theme': 'light',
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.