Skip to main content

Parameters

Adding parameters​

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

Example:
<fsi-quickzoom style="display:none"
  inPlaceZoom="true"
  magnification="2.5"
></fsi-quickzoom>

<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 QuickZoom, the corresponding parameters can be defined in the _default.xml.

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

  <QuickZoom>
    <useDevicePixelRatio value="true" />
    <enableByCSSClass value="zoom-image" />
    <zoomImageOffset value="10"/>
    <inPlaceZoom value="true"/>
    <moveRangeCenterCorners value="false"/>
  </QuickZoom>

  <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 QuickZoom script before defining the parameters:

Example:
<script type="text/javascript" src="//yourdomain.com/fsi/viewer/applications/quickzoom/js/fsiquickzoom.js"></script>
<script type="text/javascript">
  $FSI.quickZoomParameters = {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.quickZoom

debug​

boolean

Display debug and status information in the browser console
since 17.10
false
Default

Display debug and status information in the browser's 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.

useTouch​

boolean

activates the zoom function on touch-enabled devices
since 19.05
true
Default

Activates the zoom function on touch-enabled devices.

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.

headers​

string

&headers= parameter to use for image requests
since 17.11
cors
Default

The default value cors ensures cors compatibility for cross-origin scenarios.

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.

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 responsive image URLs will be modified. You can combine this parameter with the enableByCSSClass parameter.

addCSSClass​

string

adds an additional CSS class
since 17.10

Using the addCSSClass parameter for adding additional CSS classes. Only images containing the given class names will be modified by this script. All other images are displayed as normal images that do not use FSI QuickZoom.

You can combine this parameter with the disableByCSSClass parameter

magnification​

float

defines the magnification level
since 17.10

Defines the magnification level of the image section displayed in the zoom window.

It is also possible to define the magnification for each image tag individually by adding FSIQuickZoomMagnification.

Example:
<img FSIQuickZoomMagnification="4" src="mydomain.com/your/image.jpg"></img>

inPlaceZoom​

boolean

Shows zoom in place of the original image when hovered over
since 17.10
false
Default

Show zoomed image instead of the original image when hovered over (true) or show zoom image next to original image (false).

autoZoomDimension​

boolean

defines on which source the zoom image dimension depends on
since 17.10
true
Default

Zoom dimension depends on source image size and screen dimension (true) or zoom dimension corresponds to original image dimension (false).

Setting inPlaceZoom to true overwrites this parameter to false.

moveRangeCenterCorners​

boolean

defines if corners of the zoom image will be centered
since 17.10
true
Default

The zoomed image can be moved until a corner of the image is at the center of the zoom area (true), or the image can only be moved until reaching the corner (false). Setting inPlaceZoom to true overwrites the default value to false.

maxZoomWindowWidth​

float

defines the maximum zoom window width
since 17.10

Defines the maximum width of the zoom window displayed next to the original image.

maxZoomWindowHeight​

float

defines the maximum zoom window height
since 17.10
info
Default

Defines the maximum height of the zoom window displayed next to the original image.

minZoomWindowWidth​

float

defines the minimum zoom window width
since 17.10

Defines the minimum width of the zoom window displayed next to the original image.

minZoomWindowHeight​

float

defines the minimum zoom window height
since 17.10
info
Default

Defines the minimum height of the zoom window displayed next to the original image.

skipImageWidth​

integer

defines minimum image width for QuickZoom use
since 17.10

If the image width is smaller than the width defined with this parameter, FSI QuickZoom will not be applied to it.

skipImageHeight​

integer

defines minimum image height for QuickZoom use
since 17.10

If the image height is smaller than the height defined with this parameter, FSI QuickZoom will not be applied to it.

pageMargin​

float

offset for the zoom window to each side of the page
since 17.10

Defines the offset for the zoom window to each side of the page.

zoomImageBorderWidth​

float

defines the image border width
since 17.10
-1
Default

Defines the image border width of the zoom window.

zoomImageOffset​

float

defines the offset of the zoom window to the original image
since 17.10
-1
Default

Defines the horizontal offset of the zoom window to the original image.

Defining box-shadow and fade-in​

The box-shadow and the fade-in of the FSI QuickZoom zoom window can be defined via CSS.

Example:
div.FSIQuickZoom {
  border:1px solid #666;
  background-color: white;
  box-shadow: 3px 3px 3px rgba(0,0,0,0.25);
  animation-name: QuickZoomFadeIn;
  animation-duration: 0.5s;
}

@keyframes QuickZoomFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}