FSI Showcase

FSI Showcase is a combination of the HTML5 and Javascript based viewers FSI Viewer and FSI ThumbBar, for displaying multiple images in a scrollable area with a FSI Viewer instance above.

Supported devices

iOS 4 or higher
Android 4.x based devices
Windows Phone 8 and Windows RT devices
Windows 8 with touch enabled browsers
Mouse zoom: desktop or laptop computers &all major browsers

Note on Parameters

As FSI Showcase is build from both FSI Viewer and FSI ThumbBar, the related parameters are not re-listed in this chapter.

You can find the parameters in Parameters and Parameters.

Usage

To use FSI Showcase, make sure the respective images on your website come from FSI Server and add the following scripts to the <head> section of your website:

Example:

<head>
<script src="applications/viewer/js/fsiviewer.js" type="text/javascript"></script>
<script src="applications/thumbbar/js/fsithumbbar.js" type="text/javascript"></script>
</head>

FSI Showcase is build of combining the FSI Viewer and FSI ThumbBar tags, assigning the Viewer to ImageFlow with a specific viewer id:

Example:

<body>

 
//Adding FSI Viewer
<fsi-viewer id="viewer1" width="100%" height="600" noNav="1">
</fsi-viewer>
 
//Adding FSI ThumbBar, assigning the Viewer with the viewerID
<fsi-thumbbar viewerID="viewer1" width="100%" height="150"
  dir="/images/foo/" presentationType="flat">
</fsi-thumbbar>

</body>

If you want to add the fullscreen plugin to FSI Showcase, you need to wrap the Viewer and ThumbBar into a container DIV to reserve the proper space for the ThumbBar Element in fullscreen mode, like:

Example:

<body>
//Adding Container

<div id="Container_FSI_123" // Used for fullscreen element parameter of FSI Viewer
  style="position:relative; width:500px; height:500px; box-sizing:border-box;
  padding-bottom:150px;">  // Height of the Imageflow!
  //Adding FSI Viewer
  <fsi-viewer id="viewer1" width="100%" height="600" noNav="1" plugins="fullScreen"
    fullscreenelement="Container_FSI_123">
  </fsi-viewer>
  //Adding FSI ThumbBar , assigning the Viewer with the viewerID
  <fsi-thumbbar viewerID="viewer1" width="100%" height="150" dir="/images/foo/" 
    presentationType="flat">
  </fsi-thumbbar>

</div>
</body>

Note on HTML Codes

The HTML Code generated in the FSI Server interface will change accordingly to the plugins selected.