This add-on adds the possibility for customers to zoom product images by hovering a mouse pointer over the picture.



To set the Image Zoom add-on:

  • In the administration panel go to Add-ons > Manage add-ons.
  • Make sure that the Image Zoom add-on is installed and activated.
  • Click the gear button and choose Settings from the drop-down menu.
  • In the opened window define the following settings:

    • Opacity - Opacity of tint for the product picture. Define any value between 0 and 1. If 0, no tint will be visible.

    • Animation time - Duration of the animation effects in milliseconds. The more the value, the slower the zoom picture appears on the screen.

    • Color - Color to use for the tint effect. Color must be defined as hexadecimal HTML color from #000000 for black to #FFFFFF for white.

    • Zoom position list - Specifies position of zoom window. Numeric (0-15) positions are relative to page  image as shown by the following key (blue squares represent zoom  window):

      image_zoom_01

    • Zoom size mode - Defines the rule for sizing the zoom window and lens: Image - Zoom window will match small image; Lens - CSS of lens has priority, zoom window will be adjusted; Zoom - CSS of zoom window has priority, lens will be adjusted; Full - Zoom window will maximise to full size of zoom image.

    • Caption position - Position of the image caption: Top or Bottom.

    • Ease time - Number of milliseconds of mouse easing movement of zoom image. The bigger the number, the more easing. Zero means no easing.

    • Zoom fly out - If selected, the flying zoom animation is enabled.

  • Click the Save button.