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

// Important: required if you add the node AFTER the DOMContent has already been loaded 
$FSI.initCustomNode(node);


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);
 
// Important: required if you add the node AFTER the DOMContent has already been loaded 
$FSI.initCustomNode(node);

Note:

 $FSI.initCustomNode(node) initializes the given node.

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