JavaScript UI component library, includes the latest Fancybox
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Jānis Skarnelis 010edf56f3 4.0.31 6 months ago
dist 4.0.31 6 months ago
src Add `Thumbs.tpl` option 6 months ago
tests Fix #247 12 months ago
.eslintrc First commit 2 years ago
.gitignore First commit 2 years ago
.jshintrc First commit 2 years ago
.prettierrc First commit 2 years ago First commit 2 years ago Update links 1 year ago
build-css.js First commit 2 years ago
karma.conf.js First commit 2 years ago
package-lock.json 4.0.31 6 months ago
package.json 4.0.31 6 months ago
rollup.config.js Bump dependencies 1 year ago

Fancyapps UI

Collection of task-oriented components that will make you more productive. Packed full of features that you and your clients will love.

Full docs with examples:



Use either npm or yarn as follows:

npm install @fancyapps/ui
// or
yarn 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.

NOTE: 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=""></script>

Or use ES6 import:

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

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">
<a href="" data-fancybox>
<button data-fancybox data-src="#dialog-content">
  HTML element

<div id="dialog-content" style="display:none;">
  <h2>Hello, world!</h2>
    <input type="text" value="See if changes remain after closing the dialog" />

Customize options:

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


// Image gallery
var gallery = [
    src: "",
    thumb: "",
    caption: "First image",
    src: "",
    thumb: "",
    caption: "Second image",
    src: "",
    thumb: "",
    caption: "Third image",
];, {
  // Your options go here

// HTML element[{ src: "#dialog-content", type: "inline" }]);

// A copy of HTML element[{ src: "#dialog-content", type: "clone" }]);

// Any HTML content[{ 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>

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

Initialise Panzoom

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

Optionally, use CSS to customize container

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


This is commercial software. See for more info.