Skip to main content

Methods

Initialization Example:
// create the FSI ImageGrid Element and set parameters
const instance = document.createElement("fsi-imagegrid")
instance.setAttribute('id', 'myGrid')
instance.setAttribute('dir', 'images/samples/grid/colour')
instance.setAttribute('cellWidth', '120')
instance.setAttribute('cellHeight', '120')
instance.setAttribute('autoCrop', 'cc')
instance.setAttribute('debug', true)
instance.style.width = '800px'
instance.style.height = '400px'
document.body.appendChild(instance)

// Example: add listener onCellClick
const success = instance.addListener('onCellClick', (event, cell) => {
  console.log('You clicked on: ', event, cell)

  // do stuff here, Example:
  // adding method getImageDownloadURL using the nIndex parameter of the cell object passed by onCellClick
  const url = instance.getImageDownloadURL(cell.nIndex, 300, 'jpeg', {
    quality: 80
  })
  console.log('Your URL is: ', url)
})

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('onReplaceTemplateValue',
  (name, value) => {
  // code
})
Example

Consult Callbacks for an overview of all available listeners.

assignFSIViewer​

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

changeDir​

const success = changeDir(dir)
Changes directory used for the grid.
dir
string
New directory
RETURN
boolean
Returns `true` if successful.
const success = instance.changeDir('images/samples/new-dir')
Example

destroy​

destroy()
Destroys the given FSI ImageGrid object.
RETURN
void
This function does not return a value.

instance.destroy()
Example

downloadImage​

downloadImage(spriteIndex, maxDim, renderer, [queryParam])
Downloads image with an auto-generated Responsive Imaging URL.
spriteIndex
integer
Sprite index of the image
maxDim
integer
Maximum dimension
renderer
string
Renderer parameter (e.g. jpeg)
queryParam
object
Optional URL query parameters (e.g. quality)
RETURN
void
This function does not return a value.
instance.downloadImage(2, 300, 'jpeg', {quality: 80})
Example

downloadSourceImage​

downloadSourceImage(spriteIndex)
Downloads the source image with original dimensions directly and opens a Save dialog.
spriteIndex
integer
Sprite index of the image
RETURN
boolean
Returns
instance.downloadSourceImage(2)
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 Viewer 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 ImageGrid parameter, e.g. `dir` or `skin`
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 index = instance.getImageCount()
Example

getImageDownloadURL​

getImageDownloadURL(spriteIndex, maxDim, renderer, [queryParam])
Returns an auto-generated Responsive Imaging URL.
spriteIndex
integer
Sprite index of the image
maxDim
integer
Maximum dimension
renderer
string
Renderer parameter (e.g. jpeg)
queryParam
object
Optional URL query parameters (e.g. quality)
RETURN
string
Returns the download URL
instance.getImageDownloadURL(2, 300, 'jpeg', {quality: 80})
// return example:
// 'https://yourdomain.com/fsi/server?quality=80&renderer=jpeg&save=1&width=300&type=image&source=images/samples/image.jpg'
Example

getSourceImageDownloadURL​

getSourceImageDownloadURL(spriteIndex)
Returns the direct download URL of the source image. Accessing it opens a save dialog.
spriteIndex
integer
Sprite index of the image
RETURN
string
Returns the download URL
instance.getSourceImageDownloadURL(2)
// return example:
// 'https://yourdomain.com/fsi/service/file/images/samples/image.jpg'
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 ImageGrid 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:
/*
{
  autocrop: "cc"
  cellheight: "325"
  cellwidth: "300"
  debug: "true"
  dir: "/images/samples/grid/"
  id: "fsi-grid-fit"
  imagelistlimit: "0,16"
  oncellclick: "openPopUp"
  scroll: "false"
  style: "text-align:center;width:100%;height:400px;"
  usequickzoom: "false"
  usetouchzoom: "true"
}
*/
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 ImageGrid software version number.
RETURN
string
Software version number
const version = instance.getVersion()
Example

getVisibleRange​

const range = getVisibleRange()
Returns the currently visible image range.
RETURN
object
Visible range
const version = instance.getVisibleRange()
// return example:
// {"start": 0, "end": 15}
Example

init​

const success = init(id, options, debug)
Initialises the chosen viewer element.
id
string
FSI ImageGrid 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 ImageGrid has not been started automatically (default).

const success = instance.init('fsi-123', {
  dir: 'images/samples/grid',
  debug: true,
  cellWidth: '90',
  cellHeight: '61',
  preloadCount: '120',
  autoCrop: 'cc'
}, 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

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('onCellMouseDown', yourFunction)
Example

scrollToRow​

const success = scrollToRow(row, fn)
Scrolls to a certain row.
row
integer
Row to scroll to
fn
string
Name of function executed when scrolled
RETURN
void
This function does not return a value.
const success = instance.scrollToRow(2, (functionParam) => {
  // code
  })
Example

scrollToThumbIndex​

const success = scrollToRow(index, fn)
Scrolls to a certain row.
index
integer
Image index to scroll to
fn
string
Name of function executed when scrolled
RETURN
void
This function does not return a value.
const success = instance.scrollToThumbIndex(5, (functionParam) => {
  // code
  })
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.
instance.setScrollPos(3,12)
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`, `useTouchZoom` or `scroll`
RETURN
mixed
Returns where parameter is set
const show = instance.traceConfigValue('useTouchZoom')

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