Product image zoom issue on product details page when drop-down menu have overlap area with it

Question

Zoom works fine,

But when hovering on category drop-down menu to the overlap area of product image and drop-down menu, The zoom is acting normally, even the mouse is still on the drop-down menu.

Please check the capture picture:

Answer 1

You need to replace the code of lib/web/magnifier/magnifier.js in your theme as below.

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

Replace it With.

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

We need to add function on "mouseleave" event of image block otherwise zoom will display after mouse leave from image block.
Please add the above code and let me know if you need anything else.

Answer 2

For magento version 2.2.6 replace below code in your theme. File path lib/web/magnifier/magnifier.js Replace in app/design/frontend/vendor/module/web

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

Replace it With.

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

Answer 3

I upgrade to v2.2.6 and it doesn't work anymore after that
I edit the code like this and it works :

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

Answer 4

Looks like this is Magetno's bug.

Check Here.

Fix has been merged with Lattest Magetno 2.2.4.

If you are running older version than you can modify below file as workarround.

lib/web/magnifier/magnifier.js

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

Reference :- Check This commit that is merged with Magento 2.2.4

Update:- If you merge this PR and than it will be zoom issue for you. Its not working Looks Like, Fixing one Problem Messed up with other. Do it at your own Risk !!!

Answer 5

With the latest version, the above solution still didn't work, I had to specify the magnifier preview class specifically like this:

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

Answer 6

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

This code Working fine.

Thanks,

Answer 7

Where can you find the originel magnifier.js? We have this issue and use Ultimo theme. However app/design/frontend/Infortis/ultimo is how far we get. Then ofcourse I can create the web/magnifier/ folders but from where to get the right magnifier.js?

Anybody a good to go example? Thanks