Sumit Dey
Sarkar
11 Sep 2022
BootstrapIn this tutorial we will learn how to use lightbox in bootstrap 3.
Let's see example -
How to use Lightbox in Bootstrap 3
<!DOCTYPE html>
<html>
<head>
<title>How to use Lightbox in Bootstrap 3</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>How to use lightbox in bootstrap 3</h2>
<a data-toggle="lightbox" href="#LightBoxArea">
<img src="https://www.teknowize.com/attachments/file_1662886530.png" class="image iin small">
</a>
<div id="LightBoxArea" class="lightbox fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class='lightbox-dialog'>
<div class='lightbox-content'>
<img src="https://www.teknowize.com/attachments/file_1662886530.png">
<div class='lightbox-caption'>
Image 1
</div>
</div>
</div>
</div>
<a data-toggle="lightbox" href="#demoLightbox2">
<img src="https://www.teknowize.com/attachments/file_1662886577.png" class="image iin small">
</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://www.teknowize.com/attachments/file_1662886577.png">
<div class='lightbox-caption'>
Image 2
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Output
