Skip to main content

Implementing API Callbacks

All viewers offer an API which gives you more control over the viewer.

How to implement​

API Callbacks can be used the following way:

Example:
// adding the listener
instance.addListener('onFullScreen', (isFullscreen) => {
  console.log('Fullscreen set', isFullscreen)
})

Alternative implementation​

Create a function in window scope​

Example:
<script>
  function myFunc(isFullscreen){
    console.log('FullScreen set:', isFullscreen);
  }
<script>

The callback can then be assigned in the custom viewer tag:

Example:
<fsi-viewer
  id="yourViewer"
  src="images/sample.jpg"
  onFullScreen="myFunc"
/>

or in the XML configuration file:

Example:
<fsi_parameter>
  <onFullScreen value="myFunc"/>
</fsi_parameter>

Assignment by parameter​

Example:
const parameters= {
  onFullScreen: (isFullscreen)=>{
    console.log('FullScreen set:', isFullscreen);
  }
};

var myViewer = new $FSI.Viewer(containerElement, parameters);
myViewer.start();
// all callback assignments must take place before starting

Assignment by instance property​

Example:
const myViewer = new $FSI.Viewer(containerElement, parameters);
myViewer.onFullScreen = function(isFullscreen){
  console.log('FullScreen set:', isFullscreen);
}

myViewer.start();
// all callback assignments must take place before starting

:::info Please note: You can modify or add new callbacks when calling changeConfig(). You cannot change, add or remove callbacks after the viewer started. :::