How to Implement Magnifier Widget in Magento 2

Hello Magento Friends,

Today I will explain How to Implement Magnifier Widget in Magento 2

Magento JavaScript library includes a wide range of jQuery widgets. One of them is the Magnifier Widget. Magnifier Widget allows displaying images in 100% zooming scale. In Magento, this widget is used by the gallery widget to zoom product images on product pages.

Magnifier Widget is disabled by default. The below steps will help you enable Magnifier Widget in Magento 2. You can define the action, dimension, and mode of the Magnifier Widget.

So, without further delay, let’s dive in,

Steps to Implement Magnifier Widget in Magento 2:

Step 1: You can write this code in the phtml file where your media gallery is situated. Here, we have added the code in the following path.

app\design\frontend\Themes\Yourtheme\Vendor_Extension\templates\test.phtml

And add the below code

<div class="gallery-placeholder _block-content-loading whatwedo-image" data-gallery-role="gallery-placeholder">
    <img
        alt="main product photo"
        class="gallery-placeholder__image"
        src=”<image-path>”
    />
</div>

<script type="text/x-magento-init">
    {
        ".whatwedo-image": {
            "mage/gallery/gallery": {
                "data": [{
                    "thumb": "<media_url>/1.png",
                    "img": "<media_url>/2.png",
                    "full": "<media_url>/3.png",
                    "caption": "Media Check",
                    "isMain": "false"
                }],
                "mixins": ["magnifier/magnify"],
                "magnifierOpts": {
                   "enabled": true,
                   "eventType": "hover", // you can use Either click or hover
                   "width": 10, // You can write anything
                   "height": 20, // You can write anything
                   "top": 10, // You can write anything
                   "left": 20, // You can write anything
                   "fullscreenzoom": 50, // You can write anything
                   "mode": "outside" // You can write inside / outside
                }
            }
        }
    }
</script>

Step 2: Enable Magnifier From View.xml, move to below path

app\design\frontend\Themes\Yourtheme\etc\view.xml

And add the below code

<var name="magnifier">
   <var name="enabled">true</var> <!-- Turn on/off magnifier (true/false) -->
</var>

Conclusion:

This way, you can effectively Implement Magnifier Widget in Magento 2. If you do not want to use jQuery Widgets, you can even implement zoom for product images, Check out – Magento 2: How to Show Product Magnification/Zoom in Product View Page.

Just in case you come across any hardship, mention it in the comment section below. Share the article further. I will be back with another Magento solution, till then stay in the know.

Happy Coding!