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(quickId); // add your images here

// create and initialize FSI.QuickZoom
const instance = new $FSI.QuickZoom()
const success = instance.init(quickId, {
  debug: true,
  useDevicePixelRatio: true,
  inPlaceZoom: false
}, 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)
}

addImage​

const image = addImage(img)
This adds a single img node to the list of quickzoom 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.

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('onZoomStart',
  (img, zoomImg) => {
  // code
})
Example

Consult Callbacks for an overview of all available listeners.

cancelZoom​

cancelZoom()
Resets the image if it is currently zoomed.
RETURN
void
This function does not return a value.
instance.cancelZoom()
Example

destroy​

destroy()
Destroys the FSI QuickZoom 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

getBuild​

const version = getBuild()
Returns a string containing the FSI QuickZoom 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 QuickZoom parameter, e.g. `inPlaceZoom` or `magnification`
RETURN
mixed
Requested parameter value
const value = instance.getConfigValue('inPlaceZoom')
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 QuickZoom) 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 = instance.getParameters()

// return example:
/*
{
  id: 'myViewer',
  inplacezoom: '1'
}
*/
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 QuickZoom 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 QuickZoom has not been started automatically (default).

const success = instance.init('fsi-123', {
  inPlaceZoom: true,
  magnification: 4,
}, 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)
Removes one or more QuickZoom images and restores their original state.
img
array
Images
RETURN
integer
Amount of images removed
const imageAmount = instance.removeImages('imageID','imageID2')
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('onZoomEnd', yourFunction)
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 QuickZoom parameter, e.g. `inPlaceZoom` or `magnification`.
RETURN
mixed
Returns where parameter is set
const show = $FSI.quickZoom.traceConfigValue('inPlaceZoom')

// return example:
// Tracing parameter "inPlaceZoom"
// https://yourdomain.com/fsi/viewer/_default.xml
// <QuickZoom/>
// <inPlaceZoom value="true"></inPlaceZoom>
// RESULT:
// inplacezoom = "true"
Example

scanForNewImages​

scanForNewImages()
Calling the scanForNewImages method will make the script look for 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).