Events

Zoomist provides some helpful events you can listen.

You can assign event in two ways.

1 . Assign event with on in options:

new Zoomist('.zoomist-container', {
  on: {
    zoom(zoomist, scale) {
      console.log(zoomist, scale)
    }
  }
})

2 . Assign event with on method after initialization:

const zoomist = new Zoomist('.zoomist-container')

zoomist.on('zoom', (zoomist, scale) => {
  console.log(zoomist, scale)
})

All available events:

Name	Args	Description
`ready`	`(zoomist)`	Event will invoked right after initialization. `ready` won’t invoked if you assign event with `on` method, because Zoomist instance is initialized already.
`reset`	`(zoomist)`	Event will invoked when `reset` method be used.
`resize`	`(zoomist)`	Event will invoked when `.zoomist-image` is resizing.
`beforeDestroy`	`(zoomist)`	Event will invoked before Zoomist destroyed.
`destroy`	`(zoomist)`	Event will invoked on Zoomist destroy.
`beforeUpdate`	`(zoomist)`	Event will invoked before Zoomist updated.
`update`	`(zoomist)`	Event will invoked on Zoomist update.
`zoom`	`(zoomist, scale)`	Event will invoked when zooming.
`wheel`	`(zoomist, scale, event)`	Event will invoked when mouse wheeling. (Only works on desktop.)
`dragStart`	`(zoomist, transform, event)`	Event will invoked on drag start.
`drag`	`(zoomist, transform, event)`	Event will invoked when dragging.
`dragEnd`	`(zoomist, transform, event)`	Event will invoked on drag end.
`pinchStart`	`(zoomist, scale, event)`	Event will invoked on pinch start. (Only works on mobile.)
`pinch`	`(zoomist, scale, event)`	Event will invoked when pinching. (Only works on mobile.)
`pinchEnd`	`(zoomist, scale, event)`	Event will invoked on pinch end. (Only works on mobile.)
`slideStart`	`(zoomist, value, event)`	Event will invoked on slider slide start.
`slide`	`(zoomist, value, event)`	Event will invoked when slider is sliding.
`slideEnd`	`(zoomist, value, event)`	Event will invoked on slider slide end.