Lightbox

Boomerang uses Fancybox 3, a jQuery lightbox script for displaying images, videos and more. Touch enabled, responsive and fully customizable.

Fancybox is licensed under the GPLv3 license for all open source applications. A commercial license is required for all commercial applications (including sites, themes and apps you plan to sell).

With every purchase of Boomerang you get a single commercial license ($29 USD) that is limited to only 1 (one) project. For additional license options please visit the official website.

Quick start

You can install fancyBox by linking .css and .js to your html file. Make sure you also load the jQuery library. Below is a basic HTML template to use as an example:

The most basic way to use fancyBox is by adding the data-fancybox attribute to a link. A caption can be added using the data-caption attribute.

Example


<a href="PATH_TO_LARGE_IMAGE" data-fancybox="gallery" data-caption="My caption">
    <img src="PATH_TO_THUMB" class="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.

Example


<a href="PATH_TO_LARGE_IMAGE" data-fancybox="gallery" data-caption="My caption">
<img src="PATH_TO_THUMB" class="img-fluid rounded">
</a>

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

Example


<!-- Hidden content -->
<div class="d-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-base-1" href="javascript:;">
	Trigger the Fancybox
</a>

Ajax

To load content via AJAX, you need to add a data-type="ajax" attribute to your link.

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

Additionally it is possible to define a selector with the data-filter attribute to show only a part of the response. The selector can be any string, that is a valid jQuery selector:

You can combine Fancybox's functionalities with Bootstrap's modal component styles in order to get a responsive modal window for loading AJAX content in it.
AJAX content

Example


<!-- Trigger button -->
<a class="btn btn-base-1" data-fancybox data-type="ajax" data-src="<?php echo $rp; ?>ajax/_ajax-content-1.html" data-filter="#ajax_content_1" href="javascript:;">
	AJAX content
</a>

<!-- Example of HTML markup for external page -->
<div class="modal" id="ajax_content_1">
    <div class="modal-dialog">
        <div class="modal-content z-depth-0 no-border">
            <h3 class="heading heading-4">Hello there, you look nice!</h3>
            <p>
        		You can easy create stackable modal boxes. For example, your inline content or Ajax response can contain a gallery:
        	</p>

            <div class="row mt-4 mb-4">
                <div class="col-sm-4">
                    <a href="PATH_TO_LARGE_IMAGE" data-fancybox="group" data-caption="My caption #2">
                        <img src="PATH_TO_THUMB" class="img-fluid rounded">
                    </a>
                </div>
                <div class="col-sm-4">
                    <a href="PATH_TO_LARGE_IMAGE" data-fancybox="group" data-caption="My caption #2">
                        <img src="PATH_TO_THUMB" class="img-fluid rounded">
                    </a>
                </div>
                <div class="col-sm-4">
                    <a href="PATH_TO_LARGE_IMAGE" data-fancybox="group" data-caption="My caption #2">
                        <img src="PATH_TO_THUMB" class="img-fluid rounded">
                    </a>
                </div>
            </div>

            <div class="row mb-4">
                <div class="col-sm-4">
                    <a href="PATH_TO_LARGE_IMAGE" data-fancybox="group" data-caption="My caption #2">
                        <img src="PATH_TO_THUMB" class="img-fluid rounded">
                    </a>
                </div>
                <div class="col-sm-4">
                    <a href="PATH_TO_LARGE_IMAGE" data-fancybox="group" data-caption="My caption #2">
                        <img src="PATH_TO_THUMB" class="img-fluid rounded">
                    </a>
                </div>
                <div class="col-sm-4">
                    <a href="PATH_TO_LARGE_IMAGE" data-fancybox="group" data-caption="My caption #2">
                        <img src="PATH_TO_THUMB" class="img-fluid rounded">
                    </a>
                </div>
            </div>

            <p>
                Animations can be added with simple CSS transitions:
                <br><br>
                <a href="#message" class="btn btn-base-1" data-fancybox="">Try me</a>
	       </p>
        </div>
    </div>

    <div id="message" style="display: none; padding: 50px; min-width: 300px; text-align: center;">
    	<h3>Hello!</h3>
    	<p>
    		This is another instance of fancyBox!
    	</p>

    	<p>
    		<button class="btn" data-fancybox-close="">Got it!</button>
    	</p>
    </div>
</div>

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.

Webpage Sample PDF

Example


<a data-fancybox data-type="iframe" data-src="http://codepen.io/fancyapps/full/jyEGGG/" href="javascript:;">
	Webpage
</a>

<a data-fancybox data-type="iframe" data-src="https://mozilla.github.io/pdf.js/web/viewer.html" href="javascript:;">
	Sample PDF
</a>

Embedding

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

YouTube video Vimeo video Google Map Instagram photo

Example


<a data-fancybox href="https://www.youtube.com/watch?v=_sI_Ps7JSEk">
    YouTube video
</a>

<a data-fancybox href="https://vimeo.com/191947042">
    Vimeo video
</a>

<a data-fancybox href="https://www.google.com/maps/search/Empire+State+Building/">
    Google Map
</a>

<a data-fancybox href="https://www.instagram.com/p/BNXYW8-goPI/?taken-by=jamesrelfdyer" data-caption="<span title="Edited">balloon rides at dawn ✨🎈<br>was such a magical experience floating over napa valley as the golden light hit the hills.<br><a href="https://www.instagram.com/jamesrelfdyer/">@jamesrelfdyer</a></span>">
    Instagram photo
</a>