Fancybox

A lightbox library for presenting various types of media. Responsive, touch-enabled and customizable.

Official Documentation

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

<a href="../../assets/img/theme/light/img-1-800x600.jpg" data-fancybox data-caption="My caption">
    <img src="../../assets/img/theme/light/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/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):

Trigger the Fancybox 
<!-- 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>
Summary