Usage

I) Add the fsiviewer.js script to the head of your document:

Adding the script:

<head>
[…]
//adding the fsiviewer.js script
<script src="viewer/applications/viewer/js/fsiviewer.js" type="text/javascript"></script>
</head>

II) Add a <fsi-viewer> tag to the part of your document body where the zoom and/or the 360° product spin should be displayed. Add the desired dimension and the imagesource directory to it:

Integrate FSI Viewer JS (2D Zoom):

<body>
[…]
<fsi-viewer width="500" height="600" src="/images/foo.tiff"> 
// here you can place the fallback content in case the browser 
// cannot display the viewer, e,g,:
<!-- Fallback Content -->
<b>Sorry</b>, your browser is not capable of running FSI Viewer JS.
</fsi-viewer>
</body>

Integrate FSI Viewer JS 360 (360° Spins):

<body>
[…]
<fsi-viewer width="500" height="600" dir="/images/spin/">
// here you can place the fallback content in case the browser 
// cannot display the viewer, e,g,:
<!-- Fallback Content -->
<b>Sorry</b>, your browser is not capable of running FSI Viewer JS. 
</fsi-viewer>
</body>

Parameters are added to the <fsi-viewer> tag. Note that you can as well use FSI Viewer configuration files (required e.g. when using hot spots):

Adding Parameters to the viewer:

<head>
//adding the fsiviewer.js script
<script src="js/fsiviewer.js" type="text/javascript"></script>
</head> 

<body>

//Adding parameters directly to the tag:
<fsi-viewer width="500" height="600" src="/images/sample.jpg" 
debug="true" skin="silver">
</fsi-viewer> 


//Example with using a FSI Viewer configuration file:
<fsi-viewer width="500" height="600" src="/images/sample.jpg" 
cfg="sample/sample_configuration">
</fsi-viewer>

</body>