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>