FSI QuickZoom is a Javascript based tool adding image zoom to desktop devices 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.
This tutorial explains how to alter the appearance of the FSI QuickZoom zoom window. Furthermore, it shows how to change the look of the original image while displaying the zoom window.
If the fsiquickzoom.js script is embedded into a site, FSI QuickZoom will apply to all images on the page. In order to only select only specific images for FSI QuickZoom, the function can be disabled/ enabled by a certain CSS class.
It is also possible to alter the zoom window appearance with the following parameters:
magnification defines the magnification level of the image section displayed in the zoom window.
maxZoomWindowWidth, maxZoomWindowHeight, minZoomWindowHeight, minZoomWindowWidth define the dimensions of the zoom window.
zoomImageBorderWidth defines the image border width of the zoom window.
zoomImageOffset defines the horizontal offset of the zoom window to the original image.
Furthermore, the fade-in of the zoom window and the box shadow can be defined via CSS:
Finally, it is also possible to change the appearance of the original image while the zoom window is displayed via CSS: