
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


Like!! I blog quite often and I genuinely thank you for your information. The article has truly peaked my interest.