Download
User Rating: 0/5 ( 0 votes)
Matchbox is a simple, lightweight jQuery lightbox plugin. The generated lightbox uses no javascript to center the image keeping it as quick and responsive as possible on mobile devices and older machines. In it's default configuration all you need to do is add an attribute to the element you want to open the lightbox and it will do the rest or, if you want more customization, you can define a function to get the source. Other optional features include a quick link to open the image in a new window and navigation arrows to cycle through your matchboxed images without opening and closing the lightbox all the time. It even comes with a couple of basic skins that you can easily modify to better fit your site.
Source: github.com
1. INCLUDE CSS AND JS FILES
<link rel="stylesheet" href="matchbox.css" />
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
<script type="text/javascript" src="./matchbox.jquery.js"></script>
2. HTML
<img src="./imgs/_thumbs/is300.jpg" class="thumbnail" width="200px" />
<img src="./imgs/_thumbs/mr2.jpg" class="thumbnail" width="200px" />
<img src="./imgs/_thumbs/fr-s.jpg" class="thumbnail" width="200px" />
3. JAVASCRIPT
// Matchbox Initialize, form of: Overridden Source Function Example
$.matchbox({
'id':'function_matchbox',
'selector':'img.thumbnail',
'theme': 'light',
'source':function(img){
return $(img).attr('src').replace('/_thumbs/','/');
}
});
4. OPTIONS
The following settings can be passed to the markdown plug-in in an object. None of them are required.
-
id: An ID given to this specific matchbox, if running multiple light boxes on a single page (in order to use multiple themes or sources for instance) then each one much have it's own unique ID. Default Value: matchbox.
-
selector: The jQuery selector use to find all the items you want to lightbox, this can be any jquery selector but when using a data attribute for the source it makes sense to use that as the selector. Default Value:[data-fullsize].
-
selectedClass: A class that will be added to the currently selected item, this must have a value if you are going to use the navigation arrows feature. Default Value: matchbox-selected'.
-
source: The location where you can find the full size image, if a string it will look for an attribute of that name on the element, if a function is passed it will use whatever that function returns. Default Value: data-fullsize.
-
theme: The color theme of the lightbox. By the CSS include two by default, 'light' and 'dark'. Any other string can be used here but it will be missing the default colors. This is added to the main matchbox element.Default Value: dark.
-
showOpenInNewWindow: A boolean that determines whether or not to show the open-in-new-window button at the top left corner when in the lightbox. Default Value: true.
-
showNavigationArrows: A boolean that determines whether or not to show the navigation arrows on the sides of the window allowing the user to quickly go between lightboxed images. The appropriate arrow will hide when you are at the beginning or end of the selected images. Default Value: true.
-
stopPropagation: A boolean that determines whether or not the script will stop propagation of the click.Default Value: true.
-
preventDefault: A boolean that determines whether or not the script will prevent the default action of the click. Default Value: true.
-
debugMessages: Determines if the script should try and output debug messages regarding it's operation, is IE compatible so leaving this on won't kill older versions of IE. Default Value: false.
-
loadingHTML: This string should contain whatever you want to be displayed in the lightbox while it is loading the image. Whatever content is placed here will not be automatically centered unless it is a simple an image due to the way centering is done. Default Value: A image with encoded Data URI.
JS Tutorial
