FSI TouchZoom


FSI TouchZoom is an HTML5 and Javascript based tool adding image zoom to touch enabled devices like Apple iPad ™. When pinch zooming into a website containing single source images provided by FSI Server, the images will be displayed in the resolution matching the current magnification.

Supported devices

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

Usage 

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

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


If you would like to use global parameters for all images displayed with FSI TouchZoom, the corresponding parameters can be defined in the _default.xml.


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


	<TouchZoom>
		<useDevicePixelRatio value="true" />
		<enableByCSSClass value="zoom-image" />
		<zoomPrecision value="3" />
	</TouchZoom>
...

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

</fsi_parameter>


It is possible to pass optional parameters via JavaScript. In this case it is crucial to embed the TouchZoom script before defining the parameters:

Example:
<script type="text/javascript
src="/viewer/applications/touchzoom/js/fsitouchzoom.js"></script>
 
<script type="text/javascript>
$FSI.touchZoomParameters =
{debug:true, useDevicePixelRatio:false};
</script>


Alternatively it is possible to use an external JavaScript for defining the parameters. This is useful if the parameters are valid for multiple HTML documents.

In case the script is automatically initialised (default), the automatically created instance can be adressed via

$FSI.touchZoom