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



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">


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>


Add data-fancybox on any <a> element and make sure you add a correct image path inside the href attribute.



<a href="../../assets/img/theme/light/img-1-1000x800.jpg" data-fancybox data-caption="My caption">
    <img src="../../assets/img/theme/light/img-1.jpg" class="w-50 img-fluid rounded">


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-1000x800.jpg" data-fancybox="group" data-caption="My caption">
		    <img src="../../assets/img/theme/light/img-1-1000x800.jpg" class="img-fluid rounded">
	<div class="col-6">
		<a href="../../assets/img/theme/light/img-2-1000x800.jpg" data-fancybox="group" data-caption="My caption">
		    <img src="../../assets/img/theme/light/img-2-1000x800.jpg" class="img-fluid rounded">

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">
	<p>You are awesome.</p>

<!-- 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


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="">Webpage</a>
<a href="javascript:;" class="btn btn-sm btn-dark btn-circle" data-fancybox data-type="iframe" data-src="">Sample PDF</a>


Supported sites can be used with Fancybox by just providing the page URL.

<a href="" 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 href="" 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 href="" 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 href="" 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>