# 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

Show code

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

Show code

    <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">
    		</a>
    	</div>
    	<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">
    		</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):

Show code

## Hello

You are awesome.

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.

Show code
Webpage Sample PDF

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

Show code
Youtube Google Map Vimeo Instagram

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