jQuery Lightbox Gallery with Thumbnails – mBox

The mBox is a lightweight and really easy to use jQuery lightbox gallery with thumbnails. It get all images from a specific container and show them in popup lightbox gallery. Users can easily navigate next and previous images with iconic buttons or with thumbnails navigation. The plugin used Font Awesome icons for gallery interface.

Moreover, you can easily enable / disable plugin features with its Boolean options. You can also customize it with additional CSS.

Plugin Overview

Plugin: mBox
Author: Marek Bartula
Licence: MIT Licence
Published: August 19, 2019
Repository: Fork on GitHub
Dependencies: jQuery 1.3.1 or Latest version, Bootstrap 4.1.3 (Optional) and Font Awesome 4
File Type: zip archive (HTML, CSS & JavaScript )
Package Size: 3.27 MB

How to Use jQuery Lightbox Gallery

1. Load the jQuery and Font Awesome (for icons) and Bootstrap CSS into your website/app project.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<!-- Font Awesome 5 -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

<!-- Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

Note: The use of Bootstrap CSS is optional (for basic image layout).

2. Now, also include mBox‘s CSS and JavaScript files into your HTML document.

<!-- mBox CSS -->
<link rel="stylesheet" href="css/mBox.css">

<!-- mBox JS -->
<script src = "js/mBox.js"></script>

3. Create a div element with a unique id and place some images in it after loading all plugin assets.

<div id="myGallery" class="lightbox-gallery">
   <img src="img/flowers.jpg" title="gallery image 1">
   <img src="img/flowers.jpg" title="gallery image 2">
   <img src="img/flowers.jpg" title="gallery image 3">
   <img src="img/flowers.jpg" title="gallery image 4">
</div>

4. Some CSS styles for your inline images on page.

.lightbox-gallery img{
   width: 100px;
   height: auto;
   display: inline-block;
   margin: 5px;
}

5. Initialize the mBox plugin in jQuery document ready function to active the lightbox gallery.

$(document).ready(function(){

   $("#myGallery").mBox();

});

Advance Configuration Options for jQuery Lightbox Gallery

The following are some advance configuration options to create / customize “jQuery lightbox gallery thumbnails”.

Option Description, Default, Type
imagesPerPage

It define number of thumbnails to display on a single page. Default: 3, Type: Number.

$("#myGallery").mBox({
   imagesPerPage: 4,
});
displayTitle

Decide weather to display title of the image. The plugin get title from “title” attribute of image. Default: true, Type: Boolean.

$("#myGallery").mBox({
   displayTitle: false,
});
displayThumbnails

Show / hide thumbnails navigation in lightbox. Default: true, Type: Boolean.

$("#myGallery").mBox({
   displayThumbnails: true,
});
keyboardNavigation

Enable / disable keyboard arrow keys navigation for images. Default: true, Type: Boolean.

$("#myGallery").mBox({
   keyboardNavigation: true,   
});