Embedding the viewer at runtime

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

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

II) Passing parameters via JavaScript object:

NOTE: 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");

Note:

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:

Note:

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,

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