Bootstrap Lightbox Multiple Images – Modal Gallery

A lightweight jQuery plugin to create bootstrap lightbox with multiple images. The plugin magically creates image gallery in Bootstrap modal. These images can be navigate through next, previous buttons or with keyboard arrow keys. Also, it generates inline thumbnails in modal gallery.

Plugin Overview

Plugin: bootstrap modallery
Author: Luiz Gonçalves
Licence: MIT Licence
Published: May 14, 2019
Repository: Fork on GitHub
Dependencies: jQuery 1.3.1 or Latest version and Bootstrap 4.1.3
File Type: zip archive (HTML, CSS & JavaScript )
Package Size: 1.09 MB

How to Make Multiple Images Bootstrap Lightbox

1. Load the jQuery and Bootstrap framework into HTML document to getting started with Modal Gallery plugin.

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

<!-- Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

2. After that, include the modal gallery‘s CSS and JavaScript files into your website.

<!-- Modal Gallery CSS -->
<link rel="stylesheet" href="src/css/bootstrap.modallery.min.css">

<!-- Modal Gallery Js -->
<script src='src/js/bootstrap.modallery.min.js'></script>

3. Create markup structure for gallery as follows after including all assets.

 <div class="container">
    <div class="row">
      <div class="col-md-3">
        <img src="img/sm-1.jpg" data-to="img/lg-1.jpg" data-caption="This one has a caption" class="modallery">
      </div>
      <div class="col-md-3">
        <img src="img/sm-2.jpg" data-to="img/lg-2.jpg" data-caption="Here is a caption" class="modallery">
      </div>
      <div class="col-md-3">
        <img src="img/sm-3.jpg" data-to="img/lg-3.jpg" data-caption="This one also has a caption" class="modallery">
      </div>
      <div class="col-md-3">
        <img src="img/sm-4.jpg" data-to="img/lg-4.jpg" class="modallery">
      </div>
      <div class="col-md-3">
        <img src="img/sm-5.jpg" data-to="img/lg-5.jpg" data-caption="This one has a caption" class="modallery">
      </div>
      <div class="col-md-3">
        <img src="img/sm-6.jpg" data-to="img/lg-6.jpg" class="modallery">
      </div>
      <div class="col-md-3">
        <img src="img/sm-7.jpg" data-to="img/lg-7.jpg" data-caption="This one also has a caption" class="modallery">
      </div>
      <div class="col-md-3">
        <img src="img/sm-8.jpg" data-to="img/lg-8.jpg" class="modallery">
      </div>
    </div>

4. Finally, initialize the plugin globally with document selector.

$(document).ready(function(){

$(this).modallery();

});

Advance Configuration Options for Bootstrap lightbox

The following are some advance configuration options to create / customize “modal gallery”.

title

This option define the title and show it on the top of modal box. Default: ‘Image Gallery’, Type: String.

$(document).modallery({
   title: "My Modal Gallery",
});
navigate

Decide weather to show navigation (next & previous) buttons to navigate images. Default: false, Type: Boolean.

$(document).modallery({
   navigate: true,
});
arrows

Show or hide arrows icons. Default: false, Type: Boolean.

$(document).modallery({
   arrows: true,
});
keypress

Allow to navigate images through keyboard arrows keys. Default: false, Type: Boolean.

$(document).modallery({
   keypress: true,
});
size

Sets the Bootstrap available sizes for modals: sm or lg etc. Default: null, Type: String.

$(document).modallery({
   size: "lg",
});
caller

The selector, images class for Modallery to find. Default: ‘modallery’, Type: String.

$(document).modallery({
   caller: "my-class",
});