FSI ThumbBar


FSI ThumbBar is a Javascript based image thumb bar with optional image zoom.

 

Supported devices test

  • iOS 4 or higher
  • Android 4.x based devices
  • Windows 8 with touch enabled browsers
  • Mac OS with touch device

Usage

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

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


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:


Example:
<body>
<fsi-thumbbar width="400" height="150" dir="/images/foo/" >
</fsi-thumbbar>
</body>


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


Example:
<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>


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>


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>