Boostrap 4 Lightbox gallery using JQuery

Hi Guys,
Here I will give you a simple example of the Lightbox gallery.

We add simply multiple images and we almost using the ekko-lightbox libraries for the lightbox gallery.

So, let’s see the below example and follow this tutorial step by step.

Download this Tutorial from GitHub:
https://github.com/manishaprajapati7092/lightbox-gallery

Step 1: Add the ekko-lightbox library files in your HTML.

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.css">

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.js.map"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.min.js.map"></script>

In Step 1, We have added some CSS and Javascript files for the ekko-lightbox gallery.

Step 2: Add the images in HTML code.

<div class="container-fluid">
  		<div class="row no-gutters">
		    <a href="images/image-1.jpg" data-toggle="lightbox" data-gallery="gallery" class="col-md-3">
		      <img src="images/image-1.jpg" class="img-fluid">
		    </a>
		    <a href="images/image-2.jpg" data-toggle="lightbox" data-gallery="gallery" class="col-md-3">
		      <img src="images/image-2.jpg" class="img-fluid">
		    </a>
		    <a href="images/image-3.jpg" data-toggle="lightbox" data-gallery="gallery" class="col-md-3">
		      <img src="images/image-3.jpg" class="img-fluid">
		    </a>
		    <a href="images/image-4.jpg" data-toggle="lightbox" data-gallery="gallery" class="col-md-3">
		      <img src="images/image-4.jpg" class="img-fluid">
		    </a>
			<a href="images/image-5.jpg" data-toggle="lightbox" data-gallery="gallery" class="col-md-3">
			  <img src="images/image-5.jpg" class="img-fluid">
			</a>
			<a href="images/image-6.jpg" data-toggle="lightbox" data-gallery="gallery" class="col-md-3">
			  <img src="images/image-6.jpg" class="img-fluid">
			</a>
			<a href="images/image-7.jpg" data-toggle="lightbox" data-gallery="gallery" class="col-md-3">
			  <img src="images/image-7.jpg" class="img-fluid">
			</a>
			<a href="images/image-8.jpg" data-toggle="lightbox" data-gallery="gallery" class="col-md-3">
		      <img src="images/image-8.jpg" class="img-fluid">
		    </a>
		</div>
	</div>

In Step 2, We have added images in the <img> section.
Here, In the <img> section images are which images are display on background and <a href=””> section images are which images are open into the popup.
We simply pass the data-toogle=”lightbox” parameter in the anchor tags.
Galleries are created by adding the data-gallery=gallery attribute in the anchor tags.

Step 3: Add the script function before </body> section.

<script type="text/javascript">
		$(document).on("click", '[data-toggle="lightbox"]', function(event) {
  			event.preventDefault();
  			$(this).ekkoLightbox();
		});
	</script>

In Step 3, We have added a javascript function before </body> section.
In the <script> section when click on image, data-toggle=”light-box” function call and preventDefault() event fire. It’s use ekkoLightbox library.

Output