Skip to main content

What is FSI QuickZoom?

Sample RepositoryView Samples

FSI QuickZoom is a simple web component which can be used to add image zoom on mouseover or touch.

When hovering over an auto-generated responsive image provided by FSI Server, the part of the image the cursor is currently pointing at will be displayed either

  • enlarged in a zoom window next to the original image (Fly-Out Zoom)
  • or directly in the original image (In-Place Zoom)

How FSI QuickZoom works​

FSI QuickZoom searches for all <img> tags in the HTML document containing FSI Server auto-generated responsive image URLs and adds event handlers to them.

When moving the mouse cursor over these images - or moving the finger over an image on a touch device - a magnified image will be displayed next to the original image. The user can move the cursor across the original image to display any image section of interest.

Usage​

Adding the script​

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

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="">