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"

Video

YouTube and Vimeo videos can be used with fancybox by just providing the page URL

YouTube videoVimeo video
HTML
<a class="btn btn-sm btn-primary" href="https://www.youtube.com/watch?v=FCPdIvXo2rU" data-fancybox data-options="{'youtube':{'start':30,'end':35}}">YouTube video</a>
<a class="btn btn-sm btn-primary ml-sm-3 mt-sm-0" href="https://vimeo.com/58558497" data-fancybox>Vimeo video</a>