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: