Fancyapps
Return to top
On this page

Getting Started

Installation

Package manager

sh
# Usage with NPM
$ npm install --save @fancyapps/ui

# and with Yarn
$ yarn add @fancyapps/ui

Once installed, you can include Panzoom as an ES module:

js
import { Panzoom } from "@fancyapps/ui/dist/panzoom/panzoom.esm.js";
import "@fancyapps/ui/dist/panzoom/panzoom.css";

Stackblitz Example

CDN

If you prefer installing from a content delivery network:

html
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/panzoom/panzoom.umd.js"></script>
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/panzoom/panzoom.css"
/>

JSFiddle Example

Usage

Add markup

Add f-panzoom class name to your wrapping element, f-panzoom__content to your content:

html
<div class="f-panzoom" id="myPanzoom">
  <img class="f-panzoom__content" src="https://lipsum.app/id/1/1200x1500" />
</div>

Sometimes you may need to adjust spacing or to place an element above the content (for example, a copyright notice), in such cases you can wrap your content with an element having class name f-panzoom__viewport:

html
<div class="f-panzoom" id="myPanzoom">
  <div class="f-panzoom__viewport">
    <img class="f-panzoom__content" src="https://lipsum.app/id/1/1200x1500" />
  </div>
</div>

Initialize

js
const container = document.getElementById("myPanzoom");
const options = { click: "toggleCover" };

new Panzoom(container, options);

Plugins

Plugins extend Panzoom with additional features beyond the built-in core features.

Pass the object containing all plugins as the third parameter to the Panzoom constructor. Use the plugin name as the object key to specify plugin options.

Here is a basic example:

js
import { Panzoom } from "@fancyapps/ui/dist/panzoom/panzoom.esm.js";
import "@fancyapps/ui/dist/panzoom/panzoom.css";

import { Toolbar } from "@fancyapps/ui/dist/panzoom/panzoom.toolbar.esm.js";
import "@fancyapps/ui/dist/panzoom/panzoom.toolbar.css";

const container = document.getElementById("myPanzoom");
const options = {
  click: "toggleCover",
  Toolbar: {
    display: ["zoomIn", "zoomOut"],
  },
};

new Panzoom(container, options, { Toolbar });

Localization

Use l10n option to provide translations.

Translations are already available for some languages. You can view them and provide a new one using an existing one as a template - https://github.com/fancyapps/ui/tree/main/l10n/Panzoom

ESM module

First, load translations from the corresponding JS file. For example, German (de):

html
import { de } from '@fancyapps/ui/dist/panzoom/l10n/de.esm.js';

Specify translations like this:

js
new Panzoom(container, {
  l10n: de,
});

Stackblitz Example

UMD module

First, load the corresponding JS file. For example, German (de):

html
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/panzoom/l10n/de.umd.js"></script>

The translations will then be loaded into the Panzoom.l10n.de object:

js
new Panzoom(container, {
  l10n: Panzoom.l10n.de,
});

JSFiddle Example