When you check image zoom functionality in the product page, normally it should work with the entire section.
Well, let’s talk about what to do when the magnifier on an image works fine in some places, but it will get disappear from a corner before you leaves the cursor out.
For that we need to change in a magnifier library file like below,
For that we need to change in a magnifier library file like below,
You have to change in lib/web/magnifier/magnifier.js file:
Add below code after line:556
1 2 3 4 5 6 7 8 | /** * Hide magnifier when mouse exceeds image bounds. */ function onMouseLeave() { onThumbLeave(); isOverThumb = false; $magnifierPreview.addClass(MagnifyCls.magnifyHidden); } |
Another change is some code needs to be removed and add around line:575
Remove Code:
1 2 3 4 | if (inBounds && isOverThumb) { if(gMode === 'outside'){ $magnifierPreview.removeClass(MagnifyCls.magnifyHidden); } |
Add Code:
1 2 | if (inBounds && isOverThumb && gMode === 'outside') { $magnifierPreview.removeClass(MagnifyCls.magnifyHidden); |
Also remove:
1 2 3 4 | } else { onThumbLeave(); isOverThumb = false; $magnifierPreview.addClass(MagnifyCls.magnifyHidden); |
Now the last change of this file is:
Add below line after $box.on(‘mousemove’, onMousemove) code:
1 | $box.on('mouseleave', onMouseLeave); |
After all changes are applied, please run below commands and check.
1 2 | php bin/magento cache:flush php bin/magento setup:di:compile |
