Embedding the viewer at runtime
It is also possible to embed the viewer at runtime via JavaScript.
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");
document.body.appendChild(node);
$FSI.initCustomTag("fsi-viewer");
Passing parameters via JavaScript object
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);
document.body.appendChild(node);
$FSI.initCustomTag("fsi-viewer");
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
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.
var node = document.getElementById("myViewer");
node.destroy();
node.parentNode.removeChild(node);