Fancyapps

Upgrading ​

This is the 6th major rewrite of the project. Since there are many major changes to the project structure, it is recommended to upgrade from the fresh start. The goal of the rewrite was to make the project more modular, reduce file size, and improve performance.

The following are the notable changes from v5.

Overall ​

File prefix "esm" has been removed. Example:

js
// v5
import { Thumbs } from "@fancyapps/ui/dist/carousel/carousel.thumbs.esm.js";

// v6
import { Thumbs } from "@fancyapps/ui/dist/carousel/carousel.thumbs.js";

The component creation pattern has changed. Example:

js
// v5
new Panzoom(container, options);
new Carousel(container, options);
new Fancybox(slides, options);

// v6
Panzoom(container, options).init();
Carousel(container, options).init();
Fancybox.show(slides, options);

Panzoom ​

It now relies on the concept of an "action". Methods like "reset", "zoomToCover", "zoomToMax", etc. are replaced by a new "execute" method where you pass the name of the action to perform and optional parameters. The same actions are used for the "clickAction", "dblClickAction" and "wheelAction" options (for click, double-click and wheel events respectively) and their values ​​are used to manage the cursor. For example, cursor will be "zoom-in" if in the result of click the content will be zoomed in.

The functionality for handling touch events is moved to a new library called "Gestures", and animations are performed by the new "Tween" library.

To reduce file size, it is not based on the Panzoom component, but uses the "Gestures" and "Tween" libraries.

Several new plugins have been added so that it is possible to combine them together to achieve the "Fancybox inline" effect - Zoomable, Html, Video, Toolbar, Autoplay, Expand and Fullscreen.

Lazy loading functionality has been moved to a new plugin, Lazyload. The Navigation plugin has been renamed to Arrows, and there is a new Autoscroll plugin to create a "marguee" effect.

To improve performance, Carousel only holds visible slides in the DOM. Events have been reworked to detect, for example, when a slide element is inserted on the page.

Fancybox ​

It is created using the HTML element <dialog>. Fancybox now offers options that make it easier to configure the design and has a "light" theme out of the box. RTL support has been improved.

Compact mode functionality has been moved to a new plugin, "Compact mode". All other plugins, except Hash, have been replaced with Carousel plugins.

Zoom animation from thumbnail images is now enabled/disabled using the new "zoomEffect" option.

Example of configuration option changes:

js
Fancybox.bind("[data-fancybox]", {
  Slideshow: {
    playOnStart: true,
    timeout: 3000,
  },
  Toolbar: {
    display: {
      left: [],
      middle: [],
      right: ["slideshow", "close"],
    },
  },
  Images: {
    zoom: false,
  },
});
ts
Fancybox.bind("[data-fancybox]", {
  zoomEffect: false,
  Carousel: {
    Autoplay: {
      autoStart: true,
      timeout: 3000,
    },
    Toolbar: {
      display: {
        left: [],
        middle: [],
        right: ["slideshow", "close"],
      },
    },
  },
});