Fancybox 3

These modular elements can be readily used and customized in every layout across pages.

For more Details see Fancybox 3 Documentation⟶

Fancybox
HTML
<a href="assets/img/gallery/03-f.jpg" data-fancybox data-caption="Image caption">
	<img class="rounded w-100" src="assets/img/gallery/03.jpg" alt="">
</a>
JavaScript
<script src="assets/lib/fancybox/jquery.fancybox.min.js"></script>
CSS
<link href="assets/lib/fancybox/jquery.fancybox.min.css" rel="stylesheet">

Fancybox gallery

You can easily create a gallery of fancybox images by changing the data-fancybox="" attribute to the same name. For example: data-fancybox="gallery"