Fancyapps

Methods ​

Start by initializing Panzoom and storing instance in a variable.

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

const fp = new Panzoom(container, options);

Now you are ready to call any available method as shown below:

js
fp.toggleZoom();

Instance Methods ​

applyChange ​

Relatively change position, scale, or angle of content, and flip content horizontally or vertically

Parameters

js
{ panX, panY, scale, angle, originX, originY, friction, flipX, flipY, ignoreBounds, bounce, }: {
    panX?: number;
    panY?: number;
    scale?: number;
    angle?: number;
    originX?: number;
    originY?: number;
    friction?: number;
    flipX?: boolean;
    flipY?: boolean;
    ignoreBounds?: boolean;
    bounce?: boolean;
}

Returns

void

attachEvents ​

Enable click, wheel, mousemove and all touch events

Returns

void

attachObserver ​

Initialize the resize observer

Returns

void

canZoomIn ​

Check if the content can be scaled up

Returns

boolean

canZoomOut ​

Check if the content can be scaled down

Returns

boolean

destroy ​

Destroy the instance

Returns

void

detachEvents ​

Remove click, wheel, mouse movement and all touch events

Returns

void

detachObserver ​

Remove the resize observer

Returns

void

fitX ​

Change the scale level so that the content fits the container horizontally

Returns

void

fitY ​

Change the scale level so that the content fits the container vertically

Returns

void

flipX ​

Flip content horizontally

Returns

void

flipY ​

Flip content vertically

Returns

void

getBounds ​

Get information about current content boundaries

Returns

Bounds

getMatrix ​

Get transformation matrix values

Parameters

source?: MatrixValues

Returns

DOMMatrix

iterateZoom ​

Iterate scale level: fit -> full -> max -> fit

Parameters

opts?: ZoomOptions

Returns

void

Note

js
type ZoomOptions = {
  friction?: number | "auto",
  originX?: number,
  originY?: number,
  event?: Event & MouseEvent,
};

panTo ​

Pan content to selected position and scale, use friction to control duration

Parameters

js
{ x, y, scale, friction, angle, originX, originY, flipX, flipY, ignoreBounds, }: {
    x?: number;
    y?: number;
    scale?: number;
    friction?: number;
    angle?: number;
    originX?: number;
    originY?: number;
    flipX?: boolean;
    flipY?: boolean;
    ignoreBounds?: boolean;
}

Returns

void

panWithMouse ​

Update the current position based on the mouse move event

Parameters

event: MouseEvent, friction?: number

Returns

void

requestTick ​

Request an animation frame to check if the content position or scale needs to be changed based on the target values or if the content is out of bounds

Returns

void

reset ​

Reset all transformations AND animate to the original position

Parameters

friction?: number

Returns

void

rotateCCW ​

Rotate the content counterclockwise

Returns

void

rotateCW ​

Rotate the content clockwise

Returns

void

stop ​

Stop animation and optionally set target values to the current values (or vice versa)

Parameters

freeze?: "current" | "target" | false

Returns

void

toggleCover ​

Toggle scale level: fit -> cover -> fit

Parameters

opts?: ZoomOptions

Returns

void

Note

js
type ZoomOptions = {
  friction?: number | "auto",
  originX?: number,
  originY?: number,
  event?: Event & MouseEvent,
};

toggleFS ​

Toggle full screen mode

Returns

void

toggleMax ​

Toggle scale level: fit -> max -> fit

Parameters

opts?: ZoomOptions

Returns

void

Note

js
type ZoomOptions = {
  friction?: number | "auto",
  originX?: number,
  originY?: number,
  event?: Event & MouseEvent,
};

toggleZoom ​

Toggle full scale level: fit -> full -> fit

Parameters

opts?: ZoomOptions

Returns

void

Note

js
type ZoomOptions = {
  friction?: number | "auto",
  originX?: number,
  originY?: number,
  event?: Event & MouseEvent,
};

updateControls ​

Enable or disable controls depending on the current size of the content

Returns

void

updateMetrics ​

Calculate dimensions of contents and container

Parameters

silently?: boolean

Returns

void

zoomIn ​

Increase scale level

Parameters

scale?: number, opts?: ZoomOptions

Returns

void

Note

js
type ZoomOptions = {
  friction?: number | "auto",
  originX?: number,
  originY?: number,
  event?: Event & MouseEvent,
};

zoomOut ​

Reduce scale level

Parameters

scale?: number, opts?: ZoomOptions

Returns

void

Note

js
type ZoomOptions = {
  friction?: number | "auto",
  originX?: number,
  originY?: number,
  event?: Event & MouseEvent,
};

zoomTo ​

Scale the content to a specific step or level.
Note: Origin [0,0] is in the center, because content has CSS transform-origin: center center;

Parameters

js
zoomLevel?: number | "fit" | "cover" | "full" | "max" | "next", { friction, originX, originY, event, }?: ZoomOptions

Returns

void

Note

js
type ZoomOptions = {
  friction?: number | "auto",
  originX?: number,
  originY?: number,
  event?: Event & MouseEvent,
};

zoomToCover ​

Change the scale level so that the content covers the container

Parameters

opts?: ZoomOptions

Returns

void

Note

js
type ZoomOptions = {
  friction?: number | "auto",
  originX?: number,
  originY?: number,
  event?: Event & MouseEvent,
};

zoomToFit ​

Change the scale level so that the content fits inside the container

Parameters

opts?: ZoomOptions

Returns

void

Note

js
type ZoomOptions = {
  friction?: number | "auto",
  originX?: number,
  originY?: number,
  event?: Event & MouseEvent,
};

zoomToFull ​

Change the scale level so that the content has full width and height (e.g, on a 1-to-1 scale)

Parameters

opts?: ZoomOptions

Returns

void

Note

js
type ZoomOptions = {
  friction?: number | "auto",
  originX?: number,
  originY?: number,
  event?: Event & MouseEvent,
};

zoomToMax ​

Change the scale level to maximum

Parameters

opts?: ZoomOptions

Returns

void

Note

js
type ZoomOptions = {
  friction?: number | "auto",
  originX?: number,
  originY?: number,
  event?: Event & MouseEvent,
};

zoomWithWheel ​

Update the current scale based on the mouse scroll event

Parameters

event: WheelEvent

Returns

void