mBox

About the plugin

mBox is a simple jQuery lightbox plugin. It's main goal is to be easy to use and lightweight. As you can see in the examples below, it takes only 4 lines of code to initialize the plugin and transform your static images into awesome lightbox gallery. Also, mBox gives you some basic customization options which you can check here.

Installation guide

First, download mBox here:

Download View on Github

After extracting the file, include the Javascript at the bottom of your page before the closing </body> tag. Also, make sure jQuery, which is required by the plugin is also included:

<!-- Load jQuery first -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="./js/mBox.js"></script>

Include the CSS at the top of your page in your <head> tag:

<link rel="stylesheet" type="text/css" href="./css/mBox.css">

Single image

To activate mBox on selected image, simply add mBox class and call .mBox() plugin on jQuery selection.

HTML

<img src="./img/babel.jpg" class="mBox" title="Babel the cat" />

Javascript

$('.mBox').mBox();

Images collection

You can call mBox on the parent element of the images collection. mBox will automatically find all images stored within the container and combine them into one lightbox gallery.

HTML

<div class="mBox">
   <img src="./img/flowers.jpg" title="KTM" />
   <img src="./img/flowers.jpg" title="KTM" />
   <img src="./img/flowers.jpg" title="KTM" />
   <img src="./img/flowers.jpg" title="KTM" />
</div>

Javascript

$('.mBox').mBox();

Options

Option	Default	Description
imagesPerPage	3	Specifies how many thumbnails to display on a single page.
displayNavigation	true	Displays/hides navigation arrows.
displayTitle	true	Display the image title as image description.
displayThumbnails	true	Displays/hides thumbnails.
keyboardNavigation	true	If keyboard navigation is active, you can navigate trough images with left and right keyboard arrows.