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);