9

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:

enter image description here

5
  • set higher z-index to zoom , will solve your issue May 24, 2018 at 10:16
  • @ManojDeswal, I was tried using z-index: 99999; but it doesn't work. Can you provide me proper solutions. May 24, 2018 at 10:46
  • if you have online url then I can help you May 24, 2018 at 11:00
  • It's working fine in my local system. May 24, 2018 at 11:13
  • pass your online URL , after inspecting i can tell you exact solution May 24, 2018 at 11:15

7 Answers 7

19

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.

8
  • Magento 2.2.5. I made this change, cleared cached and it's still not working as it should. Any other suggestions?
    – Rudy C.
    Aug 8, 2018 at 16:38
  • Please run the following command on root of magento directory. -> php bin/magento s:up -> php bin/magento s:d:c let me know if it will not working after run above command
    – Nitin Vala
    Aug 9, 2018 at 13:27
  • That worked! The text from the name of the image is still cropping the bottom is this something you're familiar with? I was hoping that fixing the image hover issue would also fix the image text issue but it seems to be separate? Thank you for your help and time, Nitin.
    – Rudy C.
    Aug 10, 2018 at 15:31
  • Yes, The both issues are separate.it's already discussed on git hub github.com/magento/magento2/issues/15035(see last 3-4 comments) . It may also resolved in latest release of magento.
    – Nitin Vala
    Aug 11, 2018 at 17:15
  • Works for 2.2.4
    – Joel Davey
    Dec 1, 2018 at 22:42
8

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);
2
  • Thanks it is working !! May 13, 2019 at 11:12
  • Thanks. It's worked...
    – soofz
    Jul 30, 2019 at 5:17
6

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);
4
  • 1
    I just updated to 2.2.6 and used this code. Still not working for me any other suggestion? Thanks. FYI I was using the previous patch suggested by Nitin with no issues.
    – Rudy C.
    Sep 21, 2018 at 16:25
  • I edit the code with : $(largeWrapper). ... what is your front error ?
    – rudak
    Sep 22, 2018 at 12:38
  • 1
    this solved my problem on 2.2.6 thank You.
    – SoCix
    Nov 8, 2018 at 17:29
  • 1
    This works for me on 2.3
    – BartZalas
    Mar 1, 2019 at 10:28
3

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 !!!

0
3

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);
1
  • This does not work for me on a fresh install of 2.3.0. Any suggestions?
    – Rudy C.
    Jan 18, 2019 at 16:19
1
$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,

1

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

1
  • Original magnifier.js is under MagentoRoot/lib/web/magnifier/ folder.
    – Nitin Vala
    Dec 27, 2018 at 12:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.