Fancybox

Learn how to use the premium Fancybox plugin to create photo galleries

Getting started

We purchased an extended license for the premium Fancybox plugin. So if you have purchased Spaces you will not need to pay for another license. Fancybox is an awesome plugin to show a photo gallery which we use for the item details page. Here’s how you can get started using it:

You need to include the following stylesheet file before the ending of the head tag:

<!-- Fancybox CSS -->
<link rel="stylesheet" href="@@path/vendor/@fancyapps/fancybox/dist/jquery.fancybox.min.css">

You need to include the following javascript file before the ending of the body tag:

<!-- Fancybox JS -->
<script src="@@path/vendor/@fancyapps/fancybox/dist/jquery.fancybox.min.js"></script>

Here’s an example of an image gallery using data attributes:

<div class="fancy-gallery mb-5">
    <div class="row">
        <a href="../../assets/img/conference-office.jpg" class="mb-4 col-6 col-sm-4 img-fluid"
            data-fancybox="images" data-caption="Conference Space">
            <img class="rounded" src="../../assets/img/conference-office.jpg" alt="" />
        </a>
        <a href="../../assets/img/cowork-office.jpg" class="mb-4 col-6 col-sm-4 img-fluid"
            data-fancybox="images" data-caption="Cowork Office">
            <img class="rounded" src="../../assets/img/cowork-office.jpg" alt="" />
        </a>
        <a href="../../assets/img/lifestyle-office.jpg" class="mb-4 col-6 col-sm-4 img-fluid"
            data-fancybox="images" data-caption="Lifestyle Space">
            <img class="rounded" src="../../assets/img/lifestyle-office.jpg" alt="" />
        </a>
        <a href="../../assets/img/image-office.jpg" class="mb-4 col-6 col-sm-4 img-fluid"
            data-fancybox="images" data-caption="Conference Space">
            <img class="rounded" src="../../assets/img/image-office.jpg" alt="" />
        </a>
        <a href="../../assets/img/meeting-office.jpg" class="mb-4 col-6 col-sm-4 img-fluid"
            data-fancybox="images" data-caption="Meeting Office">
            <img class="rounded" src="../../assets/img/meeting-office.jpg" alt="" />
        </a>
        <a href="../../assets/img/private-office.jpg" class="mb-4 col-6 col-sm-4 img-fluid"
            data-fancybox="images" data-caption="Private Space">
            <img class="rounded" src="../../assets/img/private-office.jpg" alt="" />
        </a>
    </div>
</div>

More examples and settings

See more usage examples and the options API on the official Fancybox page.