Fancybox
A lightbox library for presenting various types of media. Responsive, touch-enabled and customizable.
Fancybox
<a href="../assets/img/prv/img-1-800x600.jpg" data-fancybox data-caption="My caption">
<img src="../assets/img/prv/img-1-800x600.jpg" class="w-50 img-fluid rounded">
</a>Grouping
If you have a group of items, you can use the same attribute data-fancybox value for each of them to create a gallery. Each group should have a unique value.
<div class="row">
<div class="col-6">
<a href="../assets/img/prv/img-1-800x600.jpg" data-fancybox="group" data-caption="My caption">
<img src="../assets/img/prv/img-1-800x600.jpg" class="img-fluid rounded">
</a>
</div>
<div class="col-6">
<a href="../assets/img/prv/img-2-800x600.jpg" data-fancybox="group" data-caption="My caption">
<img src="../assets/img/prv/img-2-800x600.jpg" class="img-fluid rounded">
</a>
</div>
</div>Inline HTML
For inline content, create a hidden element with unique id.
And then simply create a link having data-src attribute that matches ID of the element you want to open (preceded by a hash mark (#); in this example - #hidden-content):
<!-- Hidden content -->
<div style="display: none;" id="fancybox_hidden_content">
<h2>Hello</h2>
<p>You are awesome.</p>
</div>
<!-- The button that will retrieve the content from the hidden div -->
<a data-fancybox data-src="#fancybox_hidden_content" class="btn btn-dark btn-circle" href="javascript:;">
Trigger the Fancybox
</a>Iframe
If the content can be shown on a page, and placement in an iframe is not blocked by script or security configuration of that page, it can be presented in a fancyBox.
<a href="javascript:;" class="btn btn-sm btn-dark btn-circle" data-fancybox data-type="iframe" data-src="http://codepen.io/fancyapps/full/jyEGGG/">Webpage</a>
<a href="javascript:;" class="btn btn-sm btn-dark btn-circle" data-fancybox data-type="iframe" data-src="https://mozilla.github.io/pdf.js/web/viewer.html">Sample PDF</a>Embeding
Supported sites can be used with Fancybox by just providing the page URL.
<a href="https://www.youtube.com/watch?v=_sI_Ps7JSEk" data-fancybox class="btn btn-youtube btn-icon-label btn-circle">
<span class="btn-inner--icon"><i class="fab fa-youtube"></i></span>
<span class="btn-inner--text">Youtube</span>
</a>
<a href="https://www.google.com/maps/search/Empire+State+Building/" data-fancybox class="btn btn-google-plus btn-icon-label btn-circle">
<span class="btn-inner--icon"><i class="fab fa-google-plus-g"></i></span>
<span class="btn-inner--text">Google Map</span>
</a>
<a href="https://vimeo.com/191947042" data-fancybox class="btn btn-vimeo btn-icon-label btn-circle">
<span class="btn-inner--icon"><i class="fab fa-vimeo-v"></i></span>
<span class="btn-inner--text">Vimeo</span>
</a>
<a href="https://www.instagram.com/p/BjHaou8BIhj/?taken-by=webpixelsofficial" data-fancybox class="btn btn-instagram btn-icon-label btn-circle">
<span class="btn-inner--icon"><i class="fab fa-instagram"></i></span>
<span class="btn-inner--text">Instagram</span>
</a>