Skip to main content

What is FSI ThumbBar?

Sample RepositoryView Samples

FSI ThumbBar is an image thumb bar with optional image zoom.

How it works​

The script retrieves an image list from FSI Server and display the images in form of an image thumbbar in the given <fsi-thumbbar> tag.

Usage​

FSI ThumbBar script​

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

Adding the script:
<head>
  <script src="//yourdomain.com/fsi/viewer/applications/thumbbar/js/fsithumbbar.js" type="text/javascript"></script>
</head>

<fsi-thumbbar> tag​

II) Add a <fsi-thumbbar> tag to the part of your document body where FSI ThumbBar should be displayed. Add the desired dimension to it and image source (directory) to it:

Integrate FSI Pages JS:
<body>
  <fsi-thumbbar width="400" height="150" dir="/images/foo/" >
  </fsi-thumbbar>
</body>

Parameters​

Parameters are added to the <fsi-thumbbar> tag. Note that you can as well use configuration files:

Adding Parameters to FSI Pages JS:
<body>

  //Adding parameters directly to the tag:
  <fsi-thumbbar width="100%" height="150" src="/images/foo/" backgroundcolor="#000" presentationtype="flat">
  </fsi-thumbbar>

  //Example with using a FSI configuration file:
  <fsi-thumbbar width="100%" height="150" dir="/images/foo/" cfg="sample/sample_configuration">
  </fsi-thumbbar>

</body>

Configuration Files​

You can define individual configuration .xml files like this:

Simple Configuration File
<fsi_parameter>
  <image>
    <path value="samples/Watch.jpg" />
  </image>
  <ThumbBar>
    <presentationtype value="stacks" />
    <debug value="1" />
    <enablezoom value="false" />
    <preloadcount value="8" />
  </ThumbBar>
</fsi_parameter>

Configuration via _default.xml​

If you would like to use global parameters for all FSI ThumbBar instances, the corresponding parameters can be defined in the _default.xml.

Example _default.xml:
<fsi_parameter>
  <Image>
    <ServerType value="FSI"/>
  </Image>

  <ThumbBar>
    <presentationtype value="stacks" />
    <debug value="1" />
    <enablezoom value="false" />
    <preloadcount value="8" />
  </ThumbBar>

  <Options>
    <FSIBase value="config/"/>
    <Language value="english"/>
    <ScenePreload value="true"/>
  </Options>
</fsi_parameter>