Skip to main content

Callbacks

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

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

The following callback functions can be used:

onAfterReplaceLabelTemplates​

onAfterReplaceLabelTemplates(label, item)
Called directly after the Label Template is replaced.
label
string
label content
item
object
Includes start ID, index, image path and label height
RETURN
string
Returns the new label.
instance.addListener('onAfterReplaceLabelTemplates', (label, item) => {
  // AFTER label template replacement
  myFunc(label, item)
})
Example

onBeforeReplaceLabelTemplates​

onBeforeReplaceLabelTemplates(label, item)
Called directly before the Label Template is replaced.
label
string
label content
item
object
Includes start ID, index, image path and label height
RETURN
string
Returns the new label.
instance.addListener('onBeforeReplaceLabelTemplates', (label, item) => {
  // BEFORE label template replacement
  myFunc(label, item)
})
Example

onChangeConfig​

onChangeConfig(cfgFile, parameters)
Called as soon as the config is changed.
cfgFile
string
Name of the config file
parameters
object
Configuration parameters as object
instance.addListener('onChangeConfig', (cfgFile, parameters) => {
  // config changed
  myFunc(cfgFile, parameters)
})
Example

onClick​

onClick(index, item)
Called each time the user clicks an image.
index
integer
Index number
item
object
Item object
instance.addListener('onClick', (index, item) => {
  // click
  myFunc(index, item)
})
Example

onConfigsReady​

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

onDestroy​

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

onFocus​

onFocus(imgIndex, imgPath)
Called each time the foreground image changes.
imgIndex
integer
Image index number
imgPath
string
Image source path
instance.addListener('onFocus', (imgIndex, imgPath) => {
  // image focused
  myFunc(index, item)
})
Example

onSelectedImageChange​

onSelectedImageChange(index, item)
Called each time the image selected changes.
index
integer
Index number
item
object
Item object
instance.addListener('onSelectedImageChange', (index, item) => {
  // selected image is changed
  myFunc(index, item)
})
Example

onInit​

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

onMetaData​

onMetaData(item, metadata)
Called as soon as the metadata is loaded.
item
object
Item object
metadata
object
Metadata object
instance.addListener('onMetaData', (item, metadata) => {
  // meta data loaded
  myFunc(item, metadata)
})
Example

onMouseEnter​

onMouseEnter(index, item)
Called as soon the mouse enters the defined area.
index
integer
Index number
item
object
Item object
instance.addListener('onMouseEnter', (index, item) => {
  // mouse enters selection
  myFunc(index, item)
})
Example

onMouseLeave​

onMouseLeave(index, item)
Called as soon the mouse leaves the defined area.
index
integer
Index number
item
object
Item object
instance.addListener('onMouseLeave', (index, item) => {
  // mouse leaves selection
  myFunc(index, item)
})
Example

onReady​

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

onReplaceTemplateValue​

onReplaceTemplateValue(name, value)
Called while the template value is replaced.
name
string
template name
value
string
template value
RETURN
string
Returns the new value.
instance.addListener('onReplaceTemplateValue', (name, value) => {
  // template value is currently replaced
  myFunc(name, value)
})
Example

onResize​

onResize(width, height, done)
Called as soon as the instance is resized.
width
integer
width of instance
height
integer
height of instance
done
boolean
`true` = resize process is finished
instance.addListener('onResize', (width, height, done) => {
  // resize
  myFunc(width, height, done)
})
Example

onScrollStart​

onScrollStart(position)
Called as soon as the scrolling is started.
position
float
Scroll start position
instance.addListener('onScrollStart', (position) => {
  // scroll starts
  myFunc(position)
})
Example

onScrollEnd​

onScrollEnd(position)
Called as soon as the scrolling is finished.
position
float
Scroll end position
instance.addListener('onScrollEnd', (position) => {
  // scroll ends
  myFunc(position)
})
Example

onSetScrollRange​

onSetScrollRange(totalSize,range,endless,totalImg)
Called as soon as the defined scroll range is set.
totalSize
float
Total scroll size
range
float
Scroll range
endless
boolean
`true` enables endless scrolling
totalImg
integer
Amount of total images
instance.addListener('onSetScrollRange', (totalSize,range,endless,totalImg) => {
  // scroll range is set
  myFunc(totalSize,range,endless,totalImg)
})
Example

onStart​

onStart(directory,images,imgPaths)
Called as soon as the instance is started.
directory
string
Image directory
images
integer
Image amount
imgPaths
array
Image paths
instance.addListener('onStart', (directory,images,imgPaths) => {
  // instance is started
  myFunc(directory,images,imgPaths)
})
Example

onZoomEnd​

onZoomEnd()
Called each time a zoomed image has been closed.
instance.addListener('onZoomEnd', () => {
  // zoom ends
  doReallyGoodThings()
})
Example

onZoomReady​

onZoomReady(index, zoomImgURL, zoomImg)
Called as soon as the zoom is ready.
index
integer
Image index number
zoomImgURL
str
Image URL of the zoomed image
zoomImg
element
Image HTML element
instance.addListener('onZoomReady', (index, zoomImgURL, zoomImg) => {
  // zoom is ready
  myFunc(index, zoomImgURL, zoomImg)
})
Example

onZoomStart​

onZoomStart(index, imgURL)
Called as soon as the zoom is started.
index
integer
Image index number
imgURL
str
Image URL
instance.addListener('onZoomReady', (index, imgURL) => {
  // zoom is ready
  myFunc(index, imgURL)
})
Example