Skip to main content

What is FSI TouchZoom?

Sample RepositoryView Samples

FSI TouchZoom is a web component which adds image zoom to touch-enabled devices. When pinch zooming into a web page containing single-source images provided by FSI Server the images are displayed at the resolution appropriate to the current zoom level.

Usage​

Adding the script​

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="//yourdomain.com/fsi/viewer/applications/touchzoom/js/fsitouchzoom.js" type="text/javascript"></script>
</head>

Adding parameters​

Parameters can be defined by adding a <fsi-touchzoom> tag to the <body> part of your document:

Example:
<fsi-touchzoom style="display:none"
  useDevicePixelRatio="true"
></fsi-touchzoom>

<img src="//yourdomain.com/fsi/server?type=image&source=images/sample.jpg&width=480" width="480" alt="">

Global parameters​

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>

Adding parameters via JavaScript​

It is also 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="//yourdomain.com/fsi/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 addressed via $FSI.touchZoom

Supported devices​

  • all touch-enabled devices