Magnifier widget

Overview

Magnifier is a widget that allows displaying images in 100% scaled size in separate dedicated layer. In Magento it is used by the gallery widget for zooming the product images on product pages.

Initialize magnifier

The magnifier widget is initialized as described in JavaScript initialization.

When initializing the gallery Widget on an HTML element, magnifier initialization is also available. Following is the example of gallery initialization with magnifier:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<script type="text/x-magento-init">
    {
        "<element_selector>": {
            "mage/gallery/gallery": {
                "data": [{
                    "thumb": "<small_image_url>",
                    "img": "<small_image_url>",
                    "full": "<small_image_url>",
                    "caption": "<message>",
                    "isMain": "<true/false>"
                }],
                "mixins": ["magnifier/magnify"],
                "magnifierOpts": {
                   "enabled": <true/false>,
                   "eventType": "<hover/click>",
                   "width": <number>,
                   "height": <number>,
                   "top": <number>,
                   "left": <number>,
                   "fullscreenzoom": <number>,
                   "mode": "<outside/inside>"
                }
            }
        }
    }
</script>

Options

enabled

Enable magnifier.

Type: Boolean

height

Height of the magnifier block in pixels.

eventType

Action that activates zoom.

Possible values:

• hover
• click

fullscreenzoom

Zoom step in percents for the fullscreen view.

Type: Integer

left

The value for the CSS left property for the magnifier block positioning.

Type: Integer

top

The value for the CSS top property for the magnifier block positioning.

Type: Integer

width

Width of the magnifier block in pixels.

Type: Integer

mode

Specifies whether to display magnified image inside / outside lens.

Possible values:

• outside
• inside

Configure magnifier options in view.xml

Magnifier options can be set in the view.xml configuration file of a theme. The file is conventionally located in the <theme_dir>/etc/ directory.

The general magnifier options are set as follows:

1
2
3
4
5
<var name="magnifier">
    <var name="%magnifier_option1%">%option1_value%</var>
    <var name="%magnifier_option2%">%option2_value%</var>
...
</var>

For an example of setting the gallery option, see the view.xml file in the Blank theme.