Magnifier widget


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:

<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>"



Enable magnifier.

Type: Boolean


Height of the magnifier block in pixels.


Action that activates zoom.

Possible values:

  • hover
  • click


Zoom step in percents for the fullscreen view.

Type: Integer


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

Type: Integer


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

Type: Integer


Width of the magnifier block in pixels.

Type: Integer


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:

<var name="magnifier">
    <var name="%magnifier_option1%">%option1_value%</var>
    <var name="%magnifier_option2%">%option2_value%</var>

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