Updating your HTML Code

HTML Zoom and FSI Spin360 are now merged to a viewer called FSI Viewer JS. In the web interface this results in four new publishing options:

  • FSI Viewer JS (single image zoom)
  • FSI Viewer JS 360° (360° object spin & zoom)
  • FSI Viewer JS 3D (stereoscopic single image zoom)
  • FSI Viewer JS 3D 360° (stereoscopic 360° object spin & zoom)

IMPORTANT:
If you update to the final version, the old viewer scripts will be replaced. This makes it necessary to make the changes listed below.
It is not recommended using the old scripts further since they are outdated and will not be supported anymore.

Jump to:
Embedding the script
Initializing the viewer
Examples
FSIinit()
FSI TouchZoom & FSI QuickZoom

Embedding the script

As a result of the changes we have made to the JavaScript viewers, some paths to the scripts have changed.

In the old EA versions the scripts were addressed the following way:

http://myserver.com/fsi/viewer/applications/spin360/js/fsispin360.js

In the final version the path to the viewer looks like this:

http://myserver.com/fsi/viewer/applications/viewer/js/fsiviewer.js

If you have used HTML Zoom and/or FSI Spin360 before, please change the embedded script in your HTML documents accordingly and remove the fsitouchzoom.js script, since it is no longer required for displaying the JS Viewer.
FSI TouchZoom is now only responsible for adding responsive image zoom to touch-enabled devices – when pinch zooming into a website containing single source images provided by FSI Server, the images will be displayed in the resolution matching the current magnification.

Initializing the viewer

For the final version of FSI Server 2016, we have changed the way the Viewer JS can be addressed.
It is still possible to initialize it via the function FSIinit().
But we have also added a more convenient way to use the viewer: you just need to add the script to the head of your document and a custom tag () to the part of your document body where the zoom and/or the 360° product spin should be displayed.

Please consult the FSI Viewer JS manual for an in-depth explanation.

Examples

Old single image zoom (HTML Zoom) scripts:

Copy to Clipboard

New single image zoom (FSI Viewer JS) script:

Copy to Clipboard

Old Spin360 script:

Copy to Clipboard

New FSI Viewer JS script:

Copy to Clipboard

FSIinit()

We highly recommend using the viewer with the custom tag, but if would like to continue using the FSIinit() function, please keep in mind to remove the $FSI.TouchZoom part and replace $FSI.Spin360 with $FSI.Viewer.

Example:

Copy to Clipboard

FSI TouchZoom & FSI QuickZoom

FSI QuickZoom and FSI TouchZoom are initialized automatically. Therefore they only require the embedding of the corresponding script.

If you need to add parameters, you need to do this with using $FSI.quickZoomParameters or $FSI.touchZoomParameters.

Please refer to the online manual for more in-depth information.

Example (FSI TouchZoom is embedded without using parameters while FSI Quickzoom uses additional parameters):

Copy to Clipboard