Image Zoom documentation
Introduction
Image Zoom module is a Magento 2 Extension that implements jQuery ElevateZoom Plus Plugin into Magento online store. It replaces default product image zoom (photorama) script functionality with more flexible and feature-rich solution.
Installation
Please note.
Due to the Magento 2 engine peculiarities you need to have SSH access to your Magento installation. Command line interface is required to install Magento extension. Please contact your hosting provider for assistance with SSH access and command line interface.First, copy the content of the archive (app folder) to the root folder of your online shop. After copying run the console and navigate to the root shop folder.
Then run the following commands in the command line, one by one:
- bin/magento setup:upgrade
- bin/magento cache:clean
Extension settings
In order to configure the module, navigate to Stores -> Settings -> Configuration section.
Choose the TEMPLATEMONSTER -> Image Zoom in the left side menu to go to the module settings
interface.
Image Zoom plugin implements almost all configuration options provided by the Elevate Zoom API. You can see full list of options with examples at the official website. Let's see how the Image Zoom plugin can be configured.
General
| Enabled | - | Allows to enable Image Zoom module. If disabled default Magento image zoom will be displayed. |
| Zoom Type | - | You can choose from three options: Window, Lens and Inner. Some options are available for specific zoom type. |
| Lens shape | - | Select the zoom lens shape: round or square. |
| Lens fade in/out | - | Defines lens fade in/out animation duration in milliseconds. |
| Lens size | - | Defines lens size in pixels. Diameter for round and side length for square lens. |
| Contain Lens Zoom | - | This makes sure the lens does not fall outside of the image. |
| Responsive | - | Set to true to activate responsivenes. |
| Scroll zoom | - | Set to true to activate zoom on mouse scroll. |
| Image cross fade | - | Set to true to activate simultaneous crossfade of images on gallery change. |
| Show loading icon | - | Set to true to show loading icon. If set to true you'll be able to upload your loading icon. |
| Cursor | - | Select cursor type |
| Border Size | - | Border Size of the zoom window. Window and Inner modes. |
| Border Color | - | Set zoom window border color. Window and Inner modes. |
| Gallery selector | - | Input gallery ID selector. Please leave unchanged if you are not sure about the correct ID. |
| Responsive range | - | Specify the window width range for responsive behaviour. For example: 220-900 |
Window Mode
This configuration section is available only if "window" option is selected in Zoom Type field.
| Lens Border | - | Set lens border width. |
| Lens border color | - | Set lens border color. |
| Lens color | - | Set lens background color. |
| Lens opacity | - | Set lens background opacity. |
| Zoom window width | - | Zoom window width in pixels. (Make sure the value is greater than product main image dimensions.) |
| Zoom window height | - | Zoom window height in pixels. (Make sure the value is greater than product main image dimensions.) |
| Zoom window position | - | Field is provided with schematic description and allows you to choose zoom window position. |
Please note.
Zoom window width and height should be more than zoomed image container dimensions. Otherwise it will not appear. Please check an example below.To get main image dimensions you can use browser developer tools (F12 hotkey)
So the image dimensions are 452 x 500 so your zoom window dimensions should be at least 453x501 pixels.
| X/Y-axis offset | - | Defines offset of the zoom window. Allows to fine tune window position in relation to main image container. |
| Window fade in/out. | - | Defines window fade in/out animation speed in milliseconds. |
| Easing | - | Set to true to activate easing. (Can be used with Window zoom type only.) |
| Easing Amount | - | Select easing effect intensity in milliseconds. |
Tint
Tint configuration section allows you to define the appearance settings for the zoom overlay. Can be used with Window zoom type only.
| Tint | - | Activate tint. |
| Tint color | - | Set tint background opacity. |
| Tint opacity | - | Set tint opacity. |
| Tint fade in. | - | Set tint fade in speed. |
| Tint fade out. | - | Set tint fade out speed. |