FSI QuickZoom

FSI QuickZoom is an HTML5 and Javascript based tool adding image zoom to desktop and laptop computers on mouseover. When hovering over a single source image provided by FSI Server, the part of the image the cursor is currently pointing at will be displayed enlarged in a zoom window next to the original image.

 

Supported devices

  • Desktop or laptop computers & all major browsers 

Usage

To use FSI QuickZoom, 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/quickzoom/js/fsiquickzoom.js" type="text/javascript">
</script>
</head>


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>


It is 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="/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 adressed via

$FSI.quickZoom