What is FSI Showcase?

Sample Repository View Samples

FSI Showcase is a combination of FSI Viewer and FSI ImageGrid or FSI Viewer and FSI ThumbBar to display multiple images in a scrollable area with an FSI Viewer instance above.

Note on Parameters

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

You can find the parameters in FSI Viewer Parameters , FSI ThumbBar Parameters and FSI ImageGrid 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:

Adding the scripts (with ImageGrid):
<head>
  <script src="//yourdomain.com/fsi/viewer/applications/viewer/js/fsiviewer.js" type="text/javascript"></script>
  <script src="//yourdomain.com/fsi/viewer/applications/imagegrid/js/fsiimagegrid.js"></script>
</head>

or:

Adding the scripts (with ThumbBar):
<head>
  <script src="//yourdomain.com/fsi/viewer/applications/viewer/js/fsiviewer.js" type="text/javascript"></script>
  <script src="//yourdomain.com/fsi/viewer/applications/thumbbar/js/fsithumbbar.js" type="text/javascript"></script>
</head>

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

Example with FSI ImageGrid:
<body>

  //Adding FSI Viewer
  <fsi-viewer id="viewer1" width="100%" height="600" noNav="1"></fsi-viewer>

  //Adding FSI ImageGrid, assigning the Viewer with the viewerSelector
  <fsi-imagegrid
    width="100%"
    height="100%"
    dir="/images/foo/"
    cellWidth="120"
    cellHeight="101"
    viewerSelector="#viewer1"
  >
  </fsi-imagegrid>
</body>

Example with FSI ThumbBar:
<body>

  //Adding FSI Viewer
  <fsi-viewer id="viewer1" width="100%" height="600" noNav="1"></fsi-viewer>

  //Adding FSI ThumbBar, assigning the Viewer with the viewerSelector
  <fsi-thumbbar viewerSelector="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/ImageGrid into a container DIV to reserve the proper space for the ThumbBar Element in fullscreen mode, like:

Example with ThumbBar:
<body>
  //Adding Container
  <div id="Container_FSI_123"
    style="width:100%;height:100%;display:flex!important;flex-direction:column!important;flex-wrap:nowrap!important;">
  //Adding FSI Viewer
  // Used for fullscreen element parameter of FSI Viewer
    <fsi-viewer style="flex: 1 1 100%;" 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 style="flex: 0 0 160px;" viewerID="viewer1" width="100%" height="100%" dir="/images/foo/"
      presentationType="flat">
    </fsi-thumbbar>
  </div>
</body>

Example with ImageGrid:
<body>
  //Adding Container
  <div style="width:100%;height:100%;display:flex!important;flex-direction:column!important;flex-wrap:nowrap!important;"
    id="Container_FSI_123">
    //Adding FSI Viewer
    <fsi-viewer id="viewer1"
      style="flex: 1 1 100%;"
      width="100%"
      height="100%"
      plugins="resize,fullScreen"
      fullScreenElement="Container_FSI_123"
    >
    </fsi-viewer>
    //Adding FSI ImageGrid , assigning the Viewer with the viewerID
    <fsi-imagegrid
      style="flex: 1 1 60%;min-height:140px;"
      width="100%"
      height="100%"
      dir="images/Catalogs/3pages"
      cellWidth="120"
      cellHeight="101"
      viewerSelector="#viewer1">
        <fsi-imagegrid-template style="display:none">
            <div class="myImageGridImage" >
                <img class="fsi-image-grid-image"/>
            </div>
            <div class="myImageGridTitle">
                 ###image.filename###
            </div>
        </fsi-imagegrid-template>
	</fsi-imagegrid>
  </div>
</body>

Note on HTML Codes

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

Usage​

Usage