Fancyapps

Methods ​

Panzoom instances provide multiple functions for interaction, status checking, etc.

Usage ​

Start by initializing Panzoom and storing instance in a variable.

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

const myPanzoom = Panzoom(container, options).init();

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

js
myPanzoom.toggleZoom();

Instance Methods ​

canDrag ​

Check if content is scaled up and touch gestures are enabled

Returns

boolean

canZoomIn ​

Check if the content scale is less than the maximum size

Returns

boolean

canZoomOut ​

Check if the content scale is larger than the minimum size

Returns

boolean

destroy ​

Destroy instance and clean up

Returns

PanzoomInstance

emit ​

Emit event to listeners

Parameters

PanzoomEvent

Returns

void

execute ​

Execute action

Parameters

PanzoomAction, Partial<GesturesEventObject>

Returns

void

Example

myPanzoom.execute("zoomIn")

Note

ts
enum PanzoomAction {
  Reset = "reset",

  Zoom = "zoom",
  ZoomIn = "zoomIn",
  ZoomOut = "zoomOut",
  ZoomTo = "zoomTo",

  ToggleCover = "toggleCover",
  ToggleFull = "toggleFull",
  ToggleMax = "toggleMax",

  Pan = "pan",
  Swipe = "swipe",
  Move = "move",
  MoveLeft = "moveLeft",
  MoveRight = "moveRight",
  MoveUp = "moveUp",
  MoveDown = "moveDown",

  RotateCCW = "rotateCCW",
  RotateCW = "rotateCW",

  FlipX = "flipX",
  FlipY = "flipY",
}

getBoundaries ​

Get the bounds of the content in the container, optionally for custom scale size

Parameters

number

Returns

ts
{
  x: [number, number];
  y: [number, number];
}

getContainer ​

Get reference to the container DOM element

Returns

HTMLElement

getFullDim ​

Get original width and height of the content, which can be adjusted using the width and height options

Returns

ts
{
  width: number;
  height: number;
}

getGestures ​

Get reference to the Gestures instance

Returns

GesturesInstance | undefined

getMousemovePos ​

Get the position of the content given the current mouse position, optionally for custom scale size

Returns

ts
{
  x: number;
  y: number;
}

getOptions ​

Get current options

Returns

PanzoomOptions

getScale ​

Get content transformation scale for the specified scale level

Parameters

"min" | "base" | "cover" | "full" | "max"

Returns

number

getState ​

Get current state of the Panzoom instance

Returns

PanzoomState

Note

ts
enum PanzoomState {
  Init = 0,
  Loading = 1,
  Error = 2,
  Ready = 3,
  Destroyed = 4,
}

getTransform ​

Get the current state of the content's transformation or the state at the end of the ongoing animation, if it is currently animated

Parameters

afterAnimation?: boolean

Returns

ts
{
  x: number;
  y: number;
  scale: number;
  angle: number;
  flipX: number;
  flipY: number;
}

getTween ​

Get reference to the Tween instance

Returns

TweenInstance | undefined

getViewport ​

Get reference to the viewport DOM element

Returns

THTMLElement

getWrapper ​

Get reference to the wrapper DOM element

Returns

THTMLElement

init ​

Initialize Panzoom instance

Returns

PanzoomInstance

isDragging ​

Check if the content is being dragged

Returns

boolean

isExpanded ​

Check if the content is scaled up

Returns

boolean

isFullsize ​

Check if the content is being viewed in its original size

Returns

boolean

localize ​

Translate text with current language strings

Parameters

string, Array<[string, any]>

Returns

string

off ​

Remove event listener

Parameters

PanzoomEvent | PanzoomEvent[], PanzoomEventListener

Returns

PanzoomInstance

on ​

Add event listener

Parameters

PanzoomEvent | PanzoomEvent[], PanzoomEventListener

Returns

PanzoomInstance

willZoomIn ​

Check if the content scales up upon click

Returns

boolean

willZoomOut ​

Check if the content scales down upon click

Returns

boolean