Lightbox
These modular elements can be readily used and customized in every layout across pages.
For more detail see, Glightbox Documentation ⟶
Stylesheet
<link href="assets/lib/lightbox2/css/lightbox.min.css" rel="stylesheet">Javascript
<script src="assets/lib/lightbox2/js/lightbox.min.js"></script>Lightbox Image
Lightbox
<a href="../assets/img/gallery/02-f.jpg" data-gallery="gallery-2">
<img class="img-fluid rounded" src="../assets/img/gallery/02.jpg" alt="" />
</a><a href="../assets/img/gallery/02-f.jpg" data-gallery="gallery-2">
<div class="btn btn-primary m-5">Lightbox</div>
</a>Lightbox Gallery
<div class="row g-4">
<div class="col-12">
<h4 class="mt-4">Lightbox Gallery</h4>
</div>
<div class="col-sm-4 mb-4 mb-lg-0">
<a href="../assets/img/gallery/01-f.jpg" data-gallery="gallery-1">
<img class="img-fluid rounded" src="../assets/img/gallery/01.jpg" alt="" />
</a>
</div>
<div class="col-sm-4 mb-4 mb-lg-0">
<a class="post1" href="../assets/img/gallery/02-f.jpg" data-gallery="gallery-1">
<img class="img-fluid rounded" src="../assets/img/gallery/02.jpg" alt="" />
</a>
</div>
<div class="col-sm-4 mb-4 mb-lg-0">
<a class="post1" href="../assets/img/gallery/03-f.jpg" data-gallery="gallery-1">
<img class="img-fluid rounded" src="../assets/img/gallery/03.jpg" alt="" />
</a>
</div>
<div class="col-sm-4 mb-4 mb-lg-0">
<a class="post1" href="../assets/img/gallery/04-f.jpg" data-gallery="gallery-1">
<img class="img-fluid rounded" src="../assets/img/gallery/04.jpg" alt="" />
</a>
</div>
<div class="col-sm-4 mb-4 mb-lg-0">
<a class="post1" href="../assets/img/gallery/05-f.jpg" data-gallery="gallery-1">
<img class="img-fluid rounded" src="../assets/img/gallery/05.jpg" alt="" />
</a>
</div>
<div class="col-sm-4 mb-4 mb-lg-0">
<a class="post1" href="../assets/img/gallery/06-f.jpg" data-gallery="gallery-1">
<img class="img-fluid rounded" src="../assets/img/gallery/06.jpg" alt="" />
</a>
</div>
</div>