Skip to main content

Methods

Initialization Example:
// create the FSI ThumbBar Element and set parameters
const instance = document.createElement("fsi-thumbbar")
instance.setAttribute("id", 'myThumbBar')
instance.setAttribute("dir", "images/samples/grid/")
instance.setAttribute("vertical", "false")
instance.setAttribute("elementSpacing", "10px")
instance.setAttribute("elementWidth", "250px")
instance.setAttribute("autoCrop", "cc")
instance.setAttribute("thumbLabel", "###iptc.Caption###")
instance.setAttribute("debug", true)
instance.style.width = '100%'
instance.style.height = '250px'
document.body.appendChild(instance)

// use method startAutoRotate
setTimeout(() => {
  instance.startAutoRotate(1)
}, 500)

// add listener onZoomReady
const success = instance.addListener('onZoomReady', (index, zoomImgURL, zoomImg) => {
  console.log('Values: ', index, zoomImgURL, zoomImg)
})

addImages​

addImages(pathsOrOjects)
Adds images to FSI ThumbBar.
pathsOrOjects
array
Image paths or objects
RETURN
void
This function does not return a value.
instance.addImages([
  'images/sample/sample1.jpg',
  'images/sample/sample2.png'
])
Example

addListener​

const success = addListener(listenerName, fn, iScope)
Calls a specific listener. Listeners which are added via addListener(), remain valid when changeConfig() is called.
listenerName
string
Name of listener
fn
string
Name of function executed when listener is called
iScope
string
The scope of variables in which the 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('onStart',
  (dir, images, [imagePaths]]) => {
  // code
})
Example

Consult Callbacks for an overview of all available listeners.

assignFSIViewer​

assignFSIViewer(viewerInstance)
Assigns a certain FSI Viewer JS instance to FSI ThumbBar for building FSI Showcase JS.
viewerInstance
string
FSI Viewer ID
RETURN
void
This function does not return a value.
instance.assignViewer('viewerID')
Example

buttonDown​

const success = buttonDown(command)
Executes the FSI ThumbBar command chosen, i.e. can be used to simulate a button press.
command
string
FSI Thumbbar command, e.g. `previousImage`
RETURN
boolean
Returns `true` if successful.
const success = instance.buttonDown('nextImage')
Example

See Adding Control Buttons for a list of all available commands.

buttonUp​

const success = buttonUp()
Stops executing the FSI ThumbBar command, i.e. can be used to simulate a button release.
RETURN
boolean
Returns `true` if successful.
const success = instance.buttonUp()
Example

changeConfig​

changeConfig(cfgFileName, [parameters])
Reset the viewer object and change the configuration to the given configuration file.
cfgFileName
string
path to the configuration file (see cfg parameter)
parameters
object
Optional: object with start parameters. (the same parameters as in configuration files can be used)
RETURN
void
This function does not return a value.
instance.changeConfig('thumbbar_presets/vertical.xml')
Example

changeDir​

const success = changeDir(directory)
Resets the viewer object and changes the image displayed to the given image file.
directory
string
path to directory
RETURN
boolean
Returns `true` if succeeded.
const success = changeDir('images/samples/new-directory')
Example

closeZoom​

closeZoom(event, immediate)
Closes the zoom window.
event
event
Event that initiates zoom close
immediate
boolean
`true` = zoom is closed immediately
RETURN
void
This function does not return a value.
instance.closeZoom(onclick, true)
Example

destroy​

destroy()
Destroys the given FSI ThumbBar object.
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

firstImage​

firstImage(animationFrames)
Selects the first image of the range. Depending on the amount of frames specified there will be either a smooth animation or an abrupt jump to the first image.
animationFrames
integer
Amount of frames used to animate
RETURN
void
This function does not return a value.
instance.firstImage(4)
Example

focusImage​

focusImage(image)
Scrolls the bar until the image with the given index is in the foreground.
image
integer
Number of image
RETURN
void
This function does not return a value.
instance.focusImage(2)
Example

getBuild​

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

getCurrentImageIndex​

const index = getCurrentImageIndex()
Returns the image index of the image currently zoomed/clicked.
RETURN
integer
current image index
const index = instance.getCurrentImageIndex()
Example

getConfigValue​

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

getImageCount​

const images = getImageCount()
Returns the amount of images used in FSI ThumbBar.
RETURN
integer
Amount of images
const images = instance.getImageCount()
Example

getInitDone​

const done = getInitDone()
Returns if the initialization process is done.
RETURN
boolean
`true` = init complete
const done = instance.getInitDone()
Example

getInstanceID​

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

getInstanceName​

const name = getInstanceName()
Returns the type of the viewer (e.g. FSI ThumbBar or FSI Viewer) 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:
/*
{
  alignment:"0.5"
  autocrop:"cc"
  dir:"images/samples/ssi/"
  elementspacing:"4px"
  elementwidth:"420px"
  endlessscrolling:"true"
  height:"450"
  id:"myViewer"
  paddingbottom:"0"
  paddingtop:"0"
  scrollbar:"false"
  style:"width: 100%; height: 450px;"
  thumblabel:"###iptc.Headline### <br/>###iptc.Caption### <br/>###iptc.FSI Extra###"
  vertical:"false"
  width:"100%"
}
*/
Example

getScrollPos​

const pos = getScrollPos()
Returns the current scroll position.
RETURN
float
scroll position
const pos = instance.getScrollPos()
Example

getVersion​

const version = getVersion()
Returns a string containing the FSI ThumbBar 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
FSI ThumbBar Element ID
options
object
Object with start parameters. The same parameters as in configuration files can be used
debug
boolean
debug mode at initialization
RETURN
boolean
Returns `true` if the initialization succeeded.

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

const success = instance.init('fsi-123', {
  vertical: true,
  elementspacing: '10px',
  elementwidth: '500px'
}, true)
Example

isScrolling​

const scroll = isScrolling()
Returns if FSI ThumbBar is currently scrolling.
RETURN
boolean
`true` = scrolling active
const scroll = instance.isScrolling()
Example

lastImage​

lastImage(animFrames)
Selects the last image of the range.
animFrames
integer
Amount of animated frames
RETURN
void
This function does not return a value.
instance.lastImage(12)
Example

nextImage​

nextImage(animFrames)
Selects the next image of the range.
animFrames
integer
Amount of animated frames
RETURN
void
This function does not return a value.
instance.nextImage(2)
Example

nextPage​

nextPage(animFrames)
Selects the next page of the range.
animFrames
integer
Amount of animated frames
RETURN
void
This function does not return a value.
nextPage(4)
Example

previousImage​

previousImage(animFrames)
Selects the previous image of the range.
animFrames
integer
Amount of animated frames
RETURN
void
This function does not return a value.
instance.previousImage(4)
Example

previousPage​

previousPage(animFrames)
Selects the previous page of the range.
animFrames
integer
Amount of animated frames
RETURN
void
This function does not return a value.
instance.previousPage(4)
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

registerButton​

const success = registerButton(element, command)
Registers an external button.
element
DOM Element
Element to register
command
string
FSI Thumbbar command, e.g. `previousImage`
RETURN
boolean
Returns `true` if successful.
const success = registerButton('myButton',
'nextImage')
Example

See Adding Control Buttons for a list of all available commands.

removeAllImages​

const success = removeAllImages()
Removes all images.
RETURN
boolean
Returns `true` if successful.
const success = instance.removeAllImages()
Example

removeImages​

removeImages(indice)
Removes the images mentioned in the array.
indice
array
Images to remove
RETURN
void
This function does not return a value.
instance.removeImages([2,3])
Example

setScrollPos​

const position = setScrollPos(position, animFrames)
Sets the scroll position based on the given specifications.
position
float
Scroll position
animFrames
integer
Amount of animated frames
RETURN
float
Returns scroll position.
const position = instance.setScrollPos(3,12)
Example

startAutoRotate​

startAutoRotate(speed)
Starts the automatic rotation.
speed
float
Speed of rotation
RETURN
void
This function does not return a value.
instance.startAutoRotate(4)
Example

stopAutoRotate​

stopAutoRotate()
Stops the automatic rotation.
RETURN
void
This function does not return a value.
instance.stopAutoRotate()
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('onMouseLeave', 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(strName)
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 ThumbBar parameter e.g. `dir`, `alignment` or `endlessScrolling`
RETURN
mixed
Returns where parameter is set
const show = instance.traceConfigValue('endlessScrolling')

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

registerButton​

const success = unregisterButton(element)
Unregisters a button.
element
DOM Element
Element to register
RETURN
boolean
Returns `true` if successful.
const success = unregisterButton('myButton')
Example

See Adding Control Buttons for a detailed explanation.

zoomImage​

zoomImage(image)
Zooms the image requested.
image
integer
Image
RETURN
void
This function does not return a value.
instance.zoomImage(4)
Example