Fancybox
A lightbox library for presenting various types of media. Responsive, touch-enabled and customizable.
Usage
CSS
In order to use this plugin on your page you will need to include the following styles in the Page CSS area from the page’s head section:
<link rel="stylesheet" href="../../assets/libs/@fancyapps/fancybox/dist/jquery.fancybox.min.css">
JS
In order to use this plugin on your page you will need to include the following script in the “Page JS” area from the page’s footer:
<script src="../../assets/libs/@fancyapps/fancybox/dist/jquery.fancybox.min.js"></script>
Initialization
Add data-fancybox
on any <a>
element and make sure you add a correct image path inside the href
attribute.
Examples
Basic
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/theme/light/img-1-800x600.jpg" data-fancybox="group" data-caption="My caption">
<img src="../../assets/img/theme/light/img-1-800x600.jpg" class="img-fluid rounded">
</a>
</div>
<div class="col-6">
<a href="../../assets/img/theme/light/img-2-800x600.jpg" data-fancybox="group" data-caption="My caption">
<img src="../../assets/img/theme/light/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>