[Solved] Magento 2 Product Image Zoom Not Working

[Solved] Magento 2 Product Image Zoom Not Working

by

In this tutorial we going to see how to fix this issue on the product detail page.

Issue of Magento 2 product image zoom not working we going to check this step by step from below.

We need to replace the code of lib/web/magnifier/magnifier.js in your default or paid theme as below,so lets check with that are as follow as.

$(document).on('mousemove', onMousemove);
_init($box, gOptions);

Replace with this code are as follow as :

$box.on('mousemove', onMousemove);
$box.on('mouseleave', mouseleave);
function mouseleave(e) {
   onThumbLeave();
   isOverThumb = false;
   $largeWrapper.addClass(MagnifyCls.magnifyHidden);
}
_init($box, gOptions);

To fix this issue of Magento 2 product zoom not working on product detail page we need to add function on “mouseleave” event of image block otherwise zoom will display after mouse leave from the image block.

Please use the above code and check the product detail page and let me know if need any thing else regarding this point for product zoom.

And in Magento version i.e Magento 2.2.6 replace the below code in your receptive theme file path.

FIle path is lib/web/magnifier/magnifier.js Replace in app/design/frontend/vendor/module/web

$box.on('mousemove', onMousemove);
_init($box, customUserOptions);

Replace with this code are as follow as :

$box.on('mousemove', onMousemove);
   $box.on('mouseleave', mouseleave);
   function mouseleave(e) {
           onThumbLeave();
           isOverThumb = false;
           $magnifierPreview.addClass(MagnifyCls.magnifyHidden);
        }
   _init($box, customUserOptions);

Some user also have a not getting file Original magnifier.js is under MagentoRoot/lib/web/magnifier/folder

How to Create Controller in Magento 2

we can also make product image zoom on hover with the use of below code in view.xml file

File path is : app/design/frontend/Package/theme/etc/view.xml

Leave a Comment