Skip to main content

Quick Start

This guide will show you how to get started quickly with Fancyapps UI components.



Use either npm or yarn as follows:

npm install @fancyapps/ui// oryarn add  @fancyapps/ui

Import one or more components:

import { Fancybox, Carousel, Panzoom } from "@fancyapps/ui";

Import the appropriate CSS file, example:

import "@fancyapps/ui/dist/fancybox.css";


A pre-bundled scripts that contain components are available on CDN.


Because Fancybox is build on top of both Carousel and Panzoom components, you only have to include fancybox.umd.js and all 3 components will be available through the window object.

<script src="[email protected]/dist/fancybox.umd.js"></script>

Or use ES6 import:

<script type="module">  import { Fancybox } from "";</script>

Remember to include the appropriate CSS file, example:

<link  rel="stylesheet"  href=""/>



There are two ways to use Fancybox.


Add a data-fancybox attribute to any element to enable Fancybox. Galleries are created by adding the same attribute data-fancybox value to multiple elements. Use data-src or href attribute to specify the source of the content. Add a data-caption attribute if you want to show a caption under the content.

<a  href=""  data-fancybox="gallery"  data-caption="Optional caption">  Image</a>
<a href="" data-fancybox>  Video</a>
<a  href="!1m14!1m12!1m3!1d10500.902039411158!2d2.2913514905137315!3d48.85391001859112!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1slv!2slv!4v1622011463926!5m2!1slv!2slv"  data-fancybox  data-type="iframe"  data-preload="false"  data-width="640"  data-height="480">  Iframe</a>
<button data-fancybox data-src="#dialog-content">  HTML element</button>
<div id="dialog-content" style="display:none;">  <h2>Hello, world!</h2>  <p>    <input type="text" value="See if changes remain after closing the dialog" />  </p></div>

Customize options:

Fancybox.bind("[data-fancybox]", {  // Your options go here});


// Image galleryvar gallery = [  {    src: "",    thumb: "",    caption: "First image",  },  {    src: "",    thumb: "",    caption: "Second image",  },  {    src: "",    thumb: "",    caption: "Third image",  },];, {  // Your options go here});
// HTML[{ src: "#dialog-content", type: "inline" }]);
// A copy of HTML[{ src: "#dialog-content", type: "clone" }]);
// Any HTML[{ src: "<p>Lorem ipsum dolor sit amet.</p>", type: "html" }]);


Add HTML markup

<div id="myCarousel" class="carousel">  <div class="carousel__slide">1</div>  <div class="carousel__slide">2</div>  <div class="carousel__slide">3</div></div>

Initialise Carousel

const myCarousel = new Carousel(document.querySelector("#myCarousel"), {  // Your options go here});

Optionally, use CSS to customize container, navigation elements and slides

.carousel {  color: #170724;
  --carousel-button-bg: #fff;  --carousel-button-shadow: 0 2px 1px -1px rgb(0 0 0 / 20%), 0 1px 1px 0 rgb(0 0          0 / 14%), 0 1px 3px 0 rgb(0 0 0 / 12%);
  --carousel-button-svg-width: 20px;  --carousel-button-svg-height: 20px;  --carousel-button-svg-stroke-width: 2.5;}
.carousel__slide {  display: flex;  align-items: center;  justify-content: center;
  width: 80%;  height: 160px;  margin-right: 6px;
  background-color: #eee;  border-radius: 6px;}


Add HTML markup

<div id="myPanzoom" class="panzoom">  <img    class="panzoom__content"    src=""    alt=""  /></div>

Initialise Panzoom

const myPanzoom = new Panzoom(document.querySelector("#myPanzoom"), {  // Your options go here});

Optionally, use CSS to customize container

.panzoom {  width: 400px;  height: 300px;}