Embedding the viewer at runtime

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


I) Passing parameters via node attribute:

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


II) Passing parameters via JavaScript object:

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

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


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


or, when using different custom tags (fsi-viewer, fsi-imageflow,…):


to initialize all new FSI custom tags.

Exception if Scripts and HTML Code are loaded dynamically:


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(){ 
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.

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