Lightbox Multiple Images Modal Gallery

Learn how to create a lightbox with multiple images using free jQuery Plugin. It creates the gallery in the modal popup that includes the multiple images.

With the help of this plugin, you can easily showcase the series of images and when users click on any image, it will popup the lightbox mode and show the bigger version of the image.

In the bigger image mode, you can show the image title and caption. Also, you can showcase a series of images with the next/previous button to see the next image.

It’s quite a lightweight jQuery plugin that developed using the bootstrap framework and work well with multiple images. It magically creates the image gallery in the Bootstrap modal.

These photos can be navigated using the built-in next or previous buttons or also can handle though keyword arrow keys.

Furthermore, the plugin also generates the inline thumbnails in the modal gallery. The data attribute option allows developers to easily customize the gallery and make it fit with your design needs.

[ez-toc]

How to Make Multiple Images Bootstrap Lightbox

To add the modal gallery with lightbox into any project is super easy. All you need to load the Bootstrap framework files to get started.

<!-- 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"> <!-- Bootstrap JS --> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

After that, you need to load the modal gallery CSS and Javascript files into your document.

<!-- 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>

Next step to create the markup of the gallery. All you need to define the container and a row then simply wrap the image within the columns.

It depends upon you that how many images you want to show per row. In our case, we are going to show four images per row.

<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>
</div>

The Javascript

The final step to initialize the plugin by using its global function with document selector.

$(document).ready(function(){
	$(this).modallery();
});

Advance Configuration Options

With the help of the following options, you can easily customize the gallery.

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

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

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

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

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

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

Your modal gallery is ready to implement. Just view the demo and download the source code.