Fancybox 3
These modular elements can be readily used and customized in every layout across pages.
For more detail see, Fancybox 3 Documentation
Example
<a href="../assets/img/gallery/g2.jpg" data-fancybox data-caption="Image caption">
<img class="rounded w-100" src="../assets/img/gallery/g2.jpg" alt="">
</a>Gallery
<div class="row no-gutters">
<div class="col-4 px-1"><a href="../assets/img/gallery/g1.jpg" data-fancybox="gallery" data-caption="Image caption"><img class="rounded w-100" src="../assets/img/gallery/g1.jpg" alt=""></a>
</div>
<div class="col-4 px-1"><a href="../assets/img/gallery/g2.jpg" data-fancybox="gallery" data-caption="Image caption"><img class="rounded w-100" src="../assets/img/gallery/g2.jpg" alt=""></a>
</div>
<div class="col-4 px-1"><a href="../assets/img/gallery/g3.jpg" data-fancybox="gallery" data-caption="Image caption"><img class="rounded w-100" src="../assets/img/gallery/g3.jpg" alt=""></a>
</div>
</div>Stylesheet
<link href="assets/lib/fancybox/jquery.fancybox.min.css" rel="stylesheet">Javascript
<script src="assets/lib/fancybox/jquery.fancybox.min.js"></script>