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

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

  • 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 '18 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 '18 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 '18 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 '18 at 17:15
  • Works for 2.2.4 – Joel Davey Dec 1 '18 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);
  • Thanks it is working !! – Manish Goswami May 13 at 11:12
  • Thanks. It's worked... – soofz Jul 30 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);
  • 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 '18 at 16:25
  • I edit the code with : $(largeWrapper). ... what is your front error ? – rudak Sep 22 '18 at 12:38
  • 1
    this solved my problem on 2.2.6 thank You. – CDzWebDev Nov 8 '18 at 17:29
  • 1
    This works for me on 2.3 – BartZalas Mar 1 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 !!!

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

  • Original magnifier.js is under MagentoRoot/lib/web/magnifier/ folder. – Nitin Vala Dec 27 '18 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.