May 09, 2024 | jQuery Bootstrap HTML
Hello Dev,
Lightbox is a highly popular plugin within the WordPress community, widely valued for its capacity to enhance image gallery display. It contributes significantly to creating appealing layouts for portfolios, image galleries, and banner displays. Bootstrap incorporates Lightbox functionality through the bootstrap-lightbox plugin, seamlessly integrating it into Bootstrap applications. This tutorial aims to demonstrate the utilization of Lightbox in Bootstrap applications, including PHP frameworks such as Laravel, CodeIgniter, and CakePHP.
In this example, we'll use two images. Clicking on either of them will trigger a Lightbox popup displaying the larger image. While this example is straightforward, it effectively illustrates how to implement Lightbox and create an image gallery.
Below is the complete code example for the bootstrap-lightbox plugin. Studying this example will provide a clear understanding of the implementation. Feel free to copy the code and run it on your system or explore the demo.
Read Also: PHP MySQL Confirmation Box Before Delete Record Using Ajex Example Tutorial
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Lightbox Gallery Example Tutorial -- ItErrorSolution.com</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-lightbox/0.7.0/bootstrap-lightbox.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-lightbox/0.7.0/bootstrap-lightbox.min.js"></script>
<style type="text/css">
.lightbox{
z-index: 1041;
}
.small-img{
width: 100px;height: 100px;
}
</style>
</head>
<body>
<div class="container">
<h2>Bootstrap Lightbox Gallery Example Tutorial -- ItErrorSolution.com</h2>
<a data-toggle="lightbox" href="#demoLightbox">
<img src="https://dummyimage.com/600x400/000/fff" class="small-img">
</a>
<div id="demoLightbox" class="lightbox fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class='lightbox-dialog'>
<div class='lightbox-content'>
<img src="https://dummyimage.com/600x400/000/fff">
<div class='lightbox-caption'>
Write here your caption here
</div>
</div>
</div>
</div>
<a data-toggle="lightbox" href="#demoLightbox2">
<img src="https://dummyimage.com/600x500/000/fff" class="small-img">
</a>
<div id="demoLightbox2" class="lightbox fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class='lightbox-dialog'>
<div class='lightbox-content'>
<img src="https://dummyimage.com/600x500/000/fff">
<div class='lightbox-caption'>
Write here your caption here
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Output:
Thank you for your encouragement! If you have any questions or need further assistance, feel free to ask. I'm here to help!
"Hey there! I'm a full-stack developer and proud owner of ItErrorSolution.com, based right here in India. I love nothing more than sharing handy tips and tricks with my fellow developers through easy-to-follow tutorials. When it comes to coding, I'm all about PHP, Laravel, Angular, Vue, Node, JavaScript, jQuery, CodeIgniter, and Bootstrap – been hooked on them forever! I'm all about putting in the work and staying committed. Ready to join me on this journey to coding?"