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:
-
set higher z-index to zoom , will solve your issue– Manoj DeswalCommented 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.– Mayur RathodCommented May 24, 2018 at 10:46
-
if you have online url then I can help you– Manoj DeswalCommented May 24, 2018 at 11:00
-
It's working fine in my local system.– Mayur RathodCommented May 24, 2018 at 11:13
-
pass your online URL , after inspecting i can tell you exact solution– Manoj DeswalCommented May 24, 2018 at 11:15
Add a comment
|
7 Answers
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.Commented 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 Commented 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.Commented 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. Commented Aug 11, 2018 at 17:15
-
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);
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);
-
1I 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.Commented Sep 21, 2018 at 16:25
-
I edit the code with : $(largeWrapper). ... what is your front error ?– rudakCommented Sep 22, 2018 at 12:38
-
1
-
1
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 !!!
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.Commented Jan 18, 2019 at 16:19
$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,
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. Commented Dec 27, 2018 at 12:20