QuickZoom appearance

FSI QuickZoom is a Javascript-based tool that adds mouseover image zoom to desktop devices. When hovering over an auto-generated responsive image provided by FSI Server, the part of the image that the cursor is currently pointing at is magnified in a zoom window next to the original image.

This tutorial explains how to change the appearance of the FSI QuickZoom zoom window. It also shows how to change the appearance of the original image while the zoom window is displayed.

When the fsiquickzoom.js script is embedded in a page, FSI QuickZoom is applied to all images on the page. To select only certain images for FSI QuickZoom, you can disable/enable the function with a specific CSS class.

It is also possible to change the appearance of the zoom window using the following parameters:

$FSI.quickZoomParameters = {
  magnification: 3.5,
  enableByCSSClass: 'quickzoom',
  minZoomWindowWidth: 100,
  maxZoomWindowHeight: 480,
  zoomImageOffset: 10,
  zoomImageBorderWidth: 2,
};

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 from the original image.

CSS can also be used to define the fade in of the zoom window and the box shadow:

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;
  }
}

Finally, you can use CSS to change the appearance of the original image while the zoom window is displayed:

img.FSIQuickZoom {
  cursor: crosshair;
  box-shadow: 0px 3px 6px 2px #aaa;
  transition: box-shadow 0.125s ease-in-out;
}