Display Single Image Or Image Group In Lightbox - mBox

mBox is a tiny, configurable, responsive, mobile-friendly jQuery lightbox plugin which displays a single image in a lightbox popup or showcase s a group of images as a gallery.

More features:

• Image counter.
• Image caption bar.
• Thumbnail navigation (gallery lightbox).
• Keyboard navigation (gallery lightbox).

How to use it:

1. Load the stylesheet mBox.css and JavaScript mBox.js in the document.

<link rel="stylesheet" href="css/mBox.css">
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="js/mBox.js"></script>

2. Load the Font Awesome for navigation icons (only required for gallery mode).

<link rel="stylesheet" href="/path/to/fontawesome/all.css">

3. Initialize the plugin and we're ready to go.

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

4. To create a basic image lightbox, just add the CSS class mBox to the target image and done. The title attribute is required to define the image description displayed at the bottom of the lightbox.

<img src="https://source.unsplash.com/TT-ROxWj9nA/1200x900" class="mBox" title="Fashion" />

5. To group your images in a gallery lightbox, just add the CSS class mBox to the top container and done.

<div class="mBox">
  <img src="https://source.unsplash.com/TT-ROxWj9nA/1200x900" title="Fashion" />
  <img src="https://source.unsplash.com/IwVRO3TLjLc/1200x900" title="Fashion" />
  <img src="https://source.unsplash.com/Dv0YZ2_V3nc/1200x900" title="Fashion" />
  <img src="https://source.unsplash.com/jYdRUFgba8k/1200x900" title="Fashion" />
  <img src="https://source.unsplash.com/M5HPHk1y7xg/1200x900" title="Fashion" />
</div>

6. Disable/enable navigation controls in the gallery lightbox. Default: true.

$('.mBox').mBox({
  displayNavigation: true,
  keyboardNavigation: true
});

7. Show/hide the image caption bar. Default: true.

$('.mBox').mBox({
  displayTitle: false
});

8. Specify the number of images per page. Default: 3.

$('.mBox').mBox({
  imagesPerPage: 4
});

9. Enable/disable the thumbnail navigation. Default: true.

$('.mBox').mBox({
  displayThumbnails: true
});

---

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