How to use FSI Viewer
How to implement
I) Add the fsiviewer.js script to the head of your document:
Adding the script
<head>
//adding the fsiviewer.js script
<script src="//yourdomain.com/fsi/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 (2D Zoom)
<body>
<fsi-viewer width="500" height="600" src="/images/foo.tiff">
</fsi-viewer>
</body>
Integrate FSI Viewer 360 (360° Spins)
<body>
<fsi-viewer width="500" height="600" dir="/images/spin/">
</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 an FSI Viewer configuration file:
<fsi-viewer width="500" height="600" src="/images/sample.jpg" cfg="sample/sample_configuration"></fsi-viewer>
</body>
FSI Viewer is navigated by the menu bar (here seen below the image) and by using the mouse directly on the image. For example, you can select a section of the image you want to magnify.
The mouse functions are determined by the corresponding buttons on the menu bar (zoom, pan, rotate, etc.).
The optional small navigator window (bottom right) displays the position of the image section currently viewed.
How to use the Menu Bar
The menu bar might look different depending on skins or additional plugins.
Main Functions
| Button | Description |
|---|---|
| Back to Initial View. Undoes zoom, pan and rotation and restores the initial view. (identical with pressing space bar) | |
| Zoom In | |
| Zoom Out |
Mouse Modes
| Button | Description |
|---|---|
| Mouse - Zoom In Choose this function to enlarge segments using the mouse. Click on the image and drag the frame over the desired segment. Alternatively you can click on the image, without marking a segment. The image will then be magnified in steps. To zoom out in steps, hold down the CTRL-key and click on the image. | |
| Mouse - Pan Choose this function to pan the image using the mouse. Click on the image and drag in the desired direction. To return to the original view, hold down the CTRL-key and click on the image. | |
| Mouse - Rotate (only for 360° presentations) Choose this function to rotate the object around the y-axis or the x-axis if available. Click on the image and drag to the left or to the right. Move the mouse up or down to rotate the object around the x-axis. To reset rotation, hold down the CTRL-key and click on the image. |
Additional Buttons
| Button | Description |
|---|---|
| Information Displays information about the viewer (optional, can be hidden by altering the skin CSS) |
Using the navigator window
In the navigator window you can see a miniature presentation of the entire image. The segment which is currently viewed is framed. In the navigator window you can change the current segment either by dragging the frame or by clicking on the desired area of the image.