Skip to main content

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>

You can optionally modify the way FSI TouchZoom works by passing parameters to the script. To do so, pass an object containing the parameters and value as an object to the constructor:

Example:
<script type="text/javascript">
  FSITouchZoom = new $FSI.TouchZoom({
    debug:true,
    zoomPrecision:6
  });
  FSITouchZoom.init();
</script>

debug​

boolean

debug info
since 17.10
false
Default

Displays debug & status information in the javascript console.

format​

string

Defines the format used for the viewer
since 19.11
auto
Default

Default is auto which automatically chooses the best format depending on the browser; alternatively you can choose WEBP, JPEG, PNG or GIF. Auto delivers the images adaptively as WEBP in supporting browsers, and switches to PNG or JPEG on browsers not supporting the format. If you would like to use WEBP, the best way would be to set auto as the format.

useDevicePixelRatio​

boolean

Use the device's pixel ratio
since 17.10
true
Default

Use the device's pixel ratio to automatically display even sharper images.

autoInit​

boolean

Prevents automatic initialisation when the instance has been attached to the DOM
since 23.08
true
Default

Prevents automatic initialisation when the instance has been attached to the DOM. Helpful e.g. when working with React.

monitorPositions​

boolean

The script monitors the position of all responsive image tags
since 17.10
true
Default

By default, the script monitors the position of all auto-generated responsive &lt;img&gt; tags to ensure that a higher resolution image will be loaded if the image is within the viewport. For huge amounts of images on a single web page you might want to disable this feature, if the positions of the images do not change (e.g. there is no javascript modifying the DOM tree).

useTiledImages​

boolean

Zoomed images will be tiled into multiple image tiles
since 17.10
true
Default

By default, zoomed images of 1000 pixel in width or height will be tiled into multiple image tiles. While this increases the user experience and the loading performance, you might want to disable this feature if you e.g. change the style of an image (e.g. style.display) at runtime. In this case the change would not affect the tiled image.

zoomPrecision​

integer

This parameter defines the precision of loading zoomed images
since 17.10
4
Default

Using the value 0 will load images exactly matching the current magnification. This does on the other hand prevent effective caching.

Values greater than 0 increase the precision how often the script loads new images when changing the magnification. The value 4 means that the script loads new images at 1.0, 1.25, 1.5, 1.75, 2.0 etc. magnification levels.

loadingImage​

boolean or URL

Specifies which image to display at the bottom right of the viewport
since 17.10
true
Default

Specifies whether or which image to display at the bottom right of the viewport while new images are being retrieved from FSI Server. You can use true or false to enable/disable the loading image display or provide a URL to a custom image.

imgSrcAttributeName​

string

Specifies an alternative image source attribute
since 17.10

Specifies an alternative image source attribute if required. This is useful for example if your would like to have SEO optimized image URLs in the src attribute, which would lead to FSI TouchZoom not recognizing the image. In this case, you can add an alternative image src attribute which contains the FSI Server auto-generated responsive image URL.

enableByCSSClass​

string

provides a comma separated list of CSS class names
since 17.10

Using the enableByCSSClass parameter you can provide a comma separated list of CSS class names. Only images containing at least one of the given class names will be modified by this script. All other images normal images that do not increase the resolution dynamically. You can combine this parameter with the disableByCSSClass parameter.

disableByCSSClass​

string

provides a comma separated list of CSS class name
since 17.10

Using the disableByCSSClass parameter you can provide a comma separated list of CSS class names. Images containing at least one of the given class names will NOT be modified by this script. All other images containing auto-generated responsive image URLs will be modified. You can combine this parameter with the enableByCSSClass parameter.