下拉菜单中有重叠区域时，产品详细信息页面上的产品图像缩放问题

9

变焦效果很好，

但是，当将鼠标悬停在类别下拉菜单上至产品图像和下拉菜单的重叠区域时，即使鼠标仍然在下拉菜单上，缩放功能也正常运行。

请检查捕获的图片：

magento2 less-css zoom

— Mayur Rathod
source

设置较高的z-index进行缩放，将解决您的问题

— Manoj Deswal '18

@ManojDeswal，我尝试使用z-index：99999；但这不起作用。能为我提供适当的解决方案吗？

— Mayur Rathod

如果您有在线URL，那么我可以为您提供帮助

— Manoj Deswal '18

在我的本地系统中工作正常。

— Mayur Rathod

通过您的在线URL后，检查后我可以告诉您确切的解决方案

— Manoj Deswal

19

您需要按如下所示替换主题中的lib / web / magnifier / magnifier.js代码。

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

替换为。

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

我们需要在图像块的“ mouseleave”事件上添加功能，否则鼠标离开图像块后将显示缩放。
请添加上面的代码，如果您还有其他需要，请告诉我。

— 尼丁·瓦拉
source

Magento 2.2.5。我进行了此更改，清除了缓存，但仍无法正常工作。还有其他建议吗？

— 鲁迪C.18年

请在magento目录的根目录上运行以下命令。-> php bin / magento s：up-> php bin / magento s：d：c让我知道运行上述命令后它是否无法工作

— Nitin Vala

可行！图像名称中的文本仍在裁剪，这是您熟悉的吗？我希望解决图像悬停问题也能解决图像文本问题，但这似乎是分开的吗？尼丁，感谢您的帮助和时间。

— 鲁迪

是的，这两个问题是分开的。已经在git hub github.com/magento/magento2/issues/15035上进行了讨论（请参阅最后3-4条评论）。它也可能在magento的最新版本中得到解决。

— Nitin Vala，

适用于2.2.4的作品

— 乔尔·戴维

8

对于magento 2.2.6版，请在主题中替换以下代码。文件路径lib / web / magnifier / magnifier.js在app / design / frontend / vendor / module / web中替换

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

替换为。

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

— 阿妮克特（Aniket Prajapati）
source

谢谢，它正在工作！

— Manish Goswami，

谢谢。它奏效了

— soofz

6

我升级到v2.2.6，在
我像这样编辑代码之后，它不再起作用了：

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

— 鲁达克
source

1

我刚刚更新到2.2.6，并使用了此代码。仍然对我没有其他建议吗？谢谢。仅供参考，我使用的是Nitin建议的先前补丁，没有任何问题。

— 鲁迪·C

我用：$（largeWrapper）编辑代码。...您的前端错误是什么？

— rudak

1

这解决了我在2.2.6上的问题，谢谢。

— CDzWebDev

1

这对我有效2.3

— BartZalas

3

看起来这是Magetno的错误。

在这里检查。

Fix已与最新的Magetno 2.2.4合并。

如果您运行的版本较旧，则可以将以下文件修改为workarround。

lib / web / magnifier / magnifier.js

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

参考： -检查该犯被合并Magento的2.2.4

Update：- 如果您合并此PR，那么它将是缩放问题。它无法正常工作看起来像是，解决了另一个问题。风险自负！！！

— TBS法师
source

3

在最新版本中，上述解决方案仍然无法使用，我必须像这样专门指定放大镜预览类：

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

— 用户名
source

对于新安装的2.3.0，这对我不起作用。有什么建议么？

— Rudy C.19年

1

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

此代码工作正常。

谢谢，

— 普里亚
source

1

在哪里可以找到originel magnifier.js？我们遇到了这个问题，并使用Ultimo主题。但是app / design / frontend / Infortis / ultimo是我们能走多远。然后，我当然可以创建web / magnifier /文件夹，但是从哪里可以找到正确的magnifier.js？

有人去做榜样吗？谢谢

— 埃米尔
source

原始的magnifier.js位于MagentoRoot / lib / web / magnifier /文件夹下。

— Nitin Vala