Skip to main content

Callbacks

The optional JavaScript callback functions enables developers to react on events fired by FSI QuickZoom.

Refer to the appropriate chapter to learn how to implement callbacks.

onConfigsReady​

onConfigsReady(config)
Called as soon as the configuration is loaded.
config
object
Configuration parameters as object
instance.addListener('onConfigsReady', (config) => {
  // config loaded
  myFunc(config)
})
Example

onDestroy​

onDestroy()
Called as soon as the viewer is destroyed.
instance.addListener('onDestroy', () => {
  // instance is destroyed
  doReallyGoodThings()
})
Example

onInit​

onInit(parameters)
Called as soon as the viewer is initialized.
parameters
object
parameters as object
instance.addListener('onInit', (parameters) => {
  // config loaded
  myFunc(parameters)
})
Example

onReady​

onReady()
Called as soon as the instance is ready.
instance.addListener('onReady', () => {
  // instance is ready
  doReallyGoodThings()
})
Example

onStart​

onStart(imgPrep, imgDOMEl)
Called as soon as the viewer started.
imgPrep
integer
amount of images prepared
imgDOMEl
array
image DOM elements
instance.addListener('onStart', (imgPrep, imgDOMEl) => {
  // instance started
  myFunc(imgPrep, imgDOMEl)
})
Example

onZoomEnd​

onZoomEnd()
Called as soon as the zooming ends..
instance.addListener('onZoomEnd', () => {
  // zoom ends
  doReallyGoodThings()
})
Example

onZoomStart​

onZoomStart(img, zoomImg)
Called as soon as the zoom is started.
img
element
image element
zoomImg
string
zoom image?
instance.addListener('onZoomStart', (img, zoomImg) => {
  // zoom starts
  myFunc(img, zoomImg)
})
Example

onModifyPositionAndSize​

onModifyPositionAndSize(modify, info)
Called as soon as the configuration is loaded.
modify
object
Modify values such as left, top, width, srcZoomImage, etc.
info
object
contains various information you can read, e.g. info.elementPosition(clientPosition of the original image tag) or info.elementPosition(clientPosition of the original image tag) 
//  Example function for setting QuickZoom position
function myFunc(modify, info) {
  modify.left = 0;
  // relative to the left of the images clientRect
  modify.top = 0;
  // relative to the top of the images clientRect

  modify.width = 200;
  modify.height = 200;
  modify.srcZoomImage += "&effects=Sepia()";

  // info contains various information you can read
  // modifying oInfo does not change anything
  // e.g.
  // info.elementPosition(clientPosition of the original image tag)
  // info.imgPaddings(margin and border of the image)
}

instance.addListener('onModifyPositionAndSize', (modify, info) => {
  // position and size modified
  myFunc(modify, info)
})
Example