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:

<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>
            }
        }
   }
</script>

Options

enabled

Enable magnifier.

Type: Boolean

height

Height of the magnifier block in pixels.

hover

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