Fancyapps

Options ​

Panzoom has many options that allow for easy customization. Several options accept a method and use a return value. This allows, for example, to set options like maxScale depending on the screen size.

Usage ​

You can pass a set of options as a parameter into a Panzoom constructor:

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

Panzoom(container, options).init();

Available Options ​

bounds ​

If true, content position will be constrained inside the container

Type

boolean

Default

true

classes ​

Class names for DOM elements

Type

Partial<PanzoomClasses>

Default

js
{
    container: "f-panzoom",
    wrapper: "f-panzoom__wrapper",
    content: "f-panzoom__content",
    viewport: "f-panzoom__viewport",
}

clickAction ​

Default action to take on a click event

Type

PanzoomAction | false | ((ref: PanzoomInstance) => PanzoomAction | false)

Default

PanzoomAction.Zoom

dblClickAction ​

Default action to take on a double click event

Type

PanzoomAction | false | ((ref: PanzoomInstance) => PanzoomAction | false)

Default

false

event ​

Optional event to use to calculate the initial mouse position

Type

MouseEvent | undefined | ((ref: PanzoomInstance) => MouseEvent | undefined)

Default

undefined

gestures ​

Options for Gestures instance

Type

Partial<GesturesOptions> | {} | ((ref: PanzoomInstance) => Partial<GesturesOptions> | {})

Default

{}

height ​

Content height

Type

"auto" | number | ((ref: PanzoomInstance) => "auto" | number)

Default

"auto"

l10n ​

Localization of strings

Type

Record<string, string>

Default

js
{
  IMAGE_ERROR: "This image couldn't be loaded. <br /> Please try again later.",

  MOVE_UP: "Move up",
  MOVE_DOWN: "Move down",
  MOVE_LEFT: "Move left",
  MOVE_RIGHT: "Move right",

  ZOOM_IN: "Zoom in",
  ZOOM_OUT: "Zoom out",

  TOGGLE_FULL: "Toggle zoom level",
  TOGGLE_1TO1: "Toggle zoom level",
  ITERATE_ZOOM: "Toggle zoom level",

  ROTATE_CCW: "Rotate counterclockwise",
  ROTATE_CW: "Rotate clockwise",

  FLIP_X: "Flip horizontally",
  FLIP_Y: "Flip vertically",

  RESET: "Reset",
}

maxScale ​

The maximum zoom level the user can zoom. If, for example, it is 2, then the user can zoom content to 2x the original size.

Type

number | PanzoomZoomLevel | ((ref: PanzoomInstance) => number | PanzoomZoomLevel)

Default

4

minScale ​

Minimum scale level

Type

number | PanzoomZoomLevel | ((ref: PanzoomInstance) => number | PanzoomZoomLevel)

Default

1

mouseMoveFactor ​

The proportion by which the content pans relative to the cursor position. Higher value means the user has to move the mouse less for the content to reach the edge of the container.

Type

number

Default

1

on ​

Optional event listeners

Type

Partial<PanzoomEvents>

Default

undefined

panMode ​

Use touch events to pan content or follow the cursor. Automatically switches to drag if user’s primary input mechanism can not hover over elements. Tip: experiment with mouseMoveFactor option for better UX.

Type

"drag" | "mousemove" | ((ref: PanzoomInstance) => "drag" | "mousemove")

Default

"drag"

plugins ​

Optional collection of plugins to initialize for this instance

Type

Record<string, PanzoomPlugin>

Default

undefined

protected ​

If the image download needs to be prevented

Type

Boolean

Default

false

spinnerTpl ​

HTML template for spinner element

Type

string | ((ref: PanzoomInstance) => string)

Default

'<div class="f-spinner"></div>'

startPos ​

Optional content initial position

Type

ts
| {
    x: number;
    y: number;
    scale: number;
  }
| ((ref: PanzoomInstance) =>
    | {
        x: number;
        y: number;
        scale: number;
      }
    | undefined)

Default

undefined

wheelAction ​

Default action to take on a wheel event

Type

PanzoomAction | false | ((ref: PanzoomInstance) => PanzoomAction | false)

Default

PanzoomAction.Zoom

width ​

Content width

Type

"auto" | number | ((ref: PanzoomInstance) => "auto" | number)

Default

"auto"