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,
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>
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!
E-commerce has transformed the way consumers shop for products and services and interact with businesses.…
The e-commerce world is constantly in flux. New tech and strategies emerge daily to help…
Hello Magento Friends, In today’s blog, we will discuss adding a header and footer to…
Hello React Native Friends, Building a visually appealing and responsive mobile app is crucial in…
We're thrilled to announce the release of Hyvä Themes 1.3.6 and 1.3.7! These latest updates…
Your e-commerce platform is surging - orders are rolling in, traffic spikes are becoming the…