Skip to main content

Embedding the viewer at runtime

It is also possible to embed the viewer at runtime via JavaScript.

Passing parameters via node attribute​

Example:
var node = document.createElement("fsi-viewer");

node.setAttribute("width", "400");
node.setAttribute("height", "600");
node.setAttribute("src", "images/Rocker Shoe.tif");
node.setAttribute("debug", "true");

document.body.appendChild(node);

$FSI.initCustomTag("fsi-viewer");

Passing parameters via JavaScript object​

info

In this case any parameters passed via node attribute will be ignored.

Example:
var node = document.createElement("fsi-viewer");
node.style.width = "600px";
node.style.height = "400px";

var parameters = {"imagesrc" : "images/Rocker Shoe.tif", "skin":"silver", "debug":true};

$FSI.setParameters(node, parameters);
document.body.appendChild(node);

$FSI.initCustomTag("fsi-viewer");
info

When adding multiple viewers you can initialize all new FSI Viewer nodes in one go, using this command:

$FSI.initCustomTag("fsi-viewer"); or, when using different custom tags (<fsi-viewer>, <fsi-imageflow>,…):

$FSI.initCustomTags(); to initialize all new FSI custom tags.

Exception if Scripts and HTML Code are loaded dynamically​

info

In case your scripts and HTML Code are loaded dynamically, and you cannot ensure correct loading order of the scripts due to CSS (which would lead to a malfunction of the initCustomTag function which always needs to be loaded AFTER the viewer script), you can use the following function:

function onFSIViewerLoaded(){
  $FSI.initCustomTag('fsi-viewer');
}
window.addEventListener("FSIViewerLoaded", onFSIViewerLoaded);

The following events are available:

FSIViewerLoaded, FSIPagesLoaded, FSITouchZoomLoaded, FSIQuickZoomLoaded, FSIImageGridLoaded, FSIThumbBarLoaded

Destroying Instances​

Before finally removing <fsi-viewer> nodes from the DOM, you need to call the destroy() method of the node.

This will release all event handlers and free allocated resources.

Example:
var node = document.getElementById("myViewer");

node.destroy();

node.parentNode.removeChild(node);