Skip to main content

Methods

Usually you will not need to use the javascript interface.

Even if you modify an image src parameter at runtime, the tool will notice that and replace the magnified image accordingly.

If you on the other hand add images to the DOM tree at runtime or modify the position of images by script, the following interface is available to update the images and positions:

Initialization:
const quickId = 'fsiId-123'

addMyImagesToTheDom() // add your images here

// create and initialize FSI.TouchZoom
instance = new $FSI.TouchZoom()
instance.init(quickId, {
  debug: true,
  useDevicePixelRatio: true
}, false);

function addMyImagesToTheDom(quickId) {

  const ele = document.createElement("img")

  ele.setAttribute("src", "https://yourserver.com/fsi/server?type=image&source=images/sample.jpg&width=400")
  ele.setAttribute("width", "400")
  ele.setAttribute("height", "200")
  ele.setAttribute("alt", "Your Sample")
  ele.setAttribute("id", quickId)

  document.body.appendChild(ele)
}

addListener​

const success = addListener(listenerName, fn, iScope)
Calls a specific listener.
listenerName
string
Name of listener
fn
string
Name of function executed when listener is called
iScope
string
Scope of variables in which callback function is called. This determines what the variable `this` means within the specified callback function. If iScope is not passed, iScope will be the instance of the viewer to which the listener has been added.
RETURN
boolean
Returns `true` if successful.
const success = instance.addListener('onZoomChanged',
  (scale, documentScale) => {
  // code
})
Example

Consult Callbacks for an overview of all available listeners.

addImage​

const image = addImage(img)
This adds a single img node to the list of TouchZoom images.
img
element
Image node
RETURN
boolean
Returns `true` if successful
instance.addImage(imgNode)
Example
tip

You can as well call scanForNewImages() after adding an img node.

destroy​

destroy()
Destroys the FSI TouchZoom instance.
RETURN
void
This function does not return a value.
instance.destroy()
Example

dumpListeners​

dumpListeners()
Lists all listeners in the console and how often they were called.
RETURN
void
This function does not return a value.
instance.dumpListeners()
Example

addImage​

const image = addImage(img)
This adds a single img node to the list of TouchZoom images.
img
element
Image node
RETURN
boolean
Returns `true` if successful
instance.addImage(imgNode)
Example
tip

You can as well call scanForNewImages() after adding an img node.

enable​

enable(enabled)
Enables FSI TouchZoom.
enabled
boolean
`true` = enabled
RETURN
void
This function does not return a value.
instance.enable(true)
Example

getBuild​

const version = getBuild()
Returns a string containing the FSI TouchZoom software build number.
RETURN
string
Software build number
const version = instance.getBuild()
Example

getConfigValue​

const value = getConfigValue(name)
Returns the value of any configuration parameter addressed with `name`.
name
string
Any FSI TouchZoom parameter, e.g. `zoomPrecision` or `monitorPositions`
RETURN
mixed
Requested parameter value
const value = instance.getConfigValue('zoomPrecision')
Example

getImageCount​

const imageAmount = getImageCount()
Returns the amount of registered images.
RETURN
integer
Registered image amount
const imageAmount = instance.getImageCount()
Example

getInstanceID​

const getID = getInstanceID()
Returns the number of the viewer object.
RETURN
integer
Viewer ID
const getID = instance.getInstanceID()
Example

getInstanceName​

const name = getInstanceName()
Returns the type of the viewer (e.g. FSI TouchZoom) and the id attribute of the viewer object.
RETURN
string
Viewer ID attribute
const name = instance.getInstanceName()
Example

getParameters​

const param = getParameters()
Returns an object containing all parameters set via javascript or custom tag attributes.
RETURN
object
Object containing all parameters currently set
const param = $FSI.touchZoom.getParameters()

// return example:
/*
{
  id: 'myViewer',
  usedevicepixelratio: "true"
}
*/
Example

getVersion​

const version = getVersion()
Returns a string containing the FSI QuickZoom software version number.
RETURN
string
Software version number
const version = instance.getVersion()
Example

init​

const success = init(id, options, debug)
Initialises the chosen viewer element.
id
string
Element ID of FSI TouchZoom element
options
object
Object with start parameters, same parameters as in configuration files can be used
debug
boolean
Enable debug mode at initialization.
RETURN
boolean
Returns `true` if the initialization succeeded.

This method is only needed if an FSI TouchZoom has not been started automatically (default).

const success = instance.init('fsi-123', {
  useDevicePixelRatio: true,
  zoomPrecision: 4,
}, true)
Example

lockImage​

lockImage(image, lock)
Locks or unlocks a certain image.
image
element
Image element
lock
boolean
`true` = ignores change of the image (src attribute)
RETURN
void
This function does not return a value.
instance.lockImage('imageID', true)
Example

lockImageSourceDimension​

lockImageSourceDimension(image, lock)
Locks or unlocks a certain image - source dimensions will not be retrieved from server.
image
element
Image element
lock
boolean
`true` = image dimension will not be requested, even if the source changes
RETURN
void
This function does not return a value.
instance.lockImageSourceDimension('imageID', true)
Example

lockUpdates​

lockUpdates(lock)
Locks or unlocks updates to the images.
lock
boolean
`true` = TouchZoom does not update the image, even if zoom changes
RETURN
void
This function does not return a value.
instance.lockUpdates(true)
Example

printAPI​

printAPI()
Shows all API methods, listeners and button IDs in the console in alphabetical order.
RETURN
void
This function does not return a value.
instance.printAPI()
Example

removeImages​

const imageAmount = removeImages(img, silent)
Removes one or more TouchZoom images and restores their original state.
img
array
Images
silent
boolean
?
RETURN
integer
Amount of images removed
const imageAmount = instance.removeImages('imageID','imageID2')
Example

removeAllImages​

const imageAmount = removeAllImages()
Removes one or more TouchZoom images and restores their original state.
img
array
Images
RETURN
integer
Amount of images removed
const imageAmount = instance.removeAllImages()
Example

removeListener​

const success = removeListener(listenerName, fn)
Removes a specific listener.
listenerName
string
Name of listener
fn
string
Name of function executed when listener is called
RETURN
boolean
Returns `true` if successful.
const success = instance.removeListener('onZoomChanged', yourFunction)
Example

resetImage​

resetImage(img)
Resets a certain image.
img
string
Image ID
RETURN
void
This function does not return a value.
instance.resetImage('imageID')
Example

scanForNewImages​

scanForNewImages()
Calling the scanForNewImages method will make the script look for auto-generated responsive images that have not been present in the DOM tree when the document finished loading.
RETURN
void
This function does not return a value.
instance.scanForNewImages()
Example

If you e.g. add img tags at runtime, you need to call this method in order to make the script aware of new image(s).

setZoomPrecision​

setZoomPrecision(precision)
Use this method to modify the parameter zoomPrecision at runtime.
precision
float
Zoom precision
RETURN
void
This function does not return a value.
instance.setZoomPrecision(5.6)
Example

testAPIListenersStart​

testAPIListenersStart()
Starts the API test and shows all called listeners and the parameters which they return.
RETURN
void
This function does not return a value.
instance.testAPIListenersStart()
Example

testAPIListenersStop​

testAPIListenersStop()
Stops the API test.
RETURN
void
This function does not return a value.
instance.testAPIListenersStop()
Example

traceConfigValue​

const show = traceConfigValue(name)
Traces a config value and enables you to see where (by parameter/attribute, in config files, the _default.xml, etc) a specific value is set.
name
string
Any FSI TouchZoom parameter, e.g. `useDevicePixelRatio` or `zoomPrecision`.
RETURN
mixed
Returns where parameter is set
const show = $FSI.touchZoom.traceConfigValue('useDevicePixelRatio')

// return example:
// Tracing parameter "useDevicePixelRatio"
// > By Parameter/Attribute:
// true
// RESULT:
// useDevicePixelRatio = "true"
Example

triggerRefresh​

triggerRefresh()
Triggers a refresh.
RETURN
void
This function does not return a value.
instance.triggerRefresh()
Example

updateImagePositions​

updateImagePositions()
This makes the tool update all image positions and refresh images if needed. You might want to call this after modifying the DOM tree by script.
RETURN
void
This function does not return a value.
instance.updateImagePositions()
Example