将MagnificPopup与ElevateZoom结合使用

Question

大家都是JavaScript / jquery大师。

我希望有人能够帮助我，因为我很难将MagnificPopup与ElevateZoom结合起来。

如果只有一张图片，我可以使ElevateZoom工作。但是在图库模式（几张图片）中，它失败了。

以下是使用一张图片的示例。

您可以看到弹出窗口后面的图像。如果有几个图像则不起作用。

我对magnificpopup.js进行了一些更改：

开放：功能（数据）{...＆＃34;

我添加了

directive

之前

$(".mfp-img").elevateZoom(); 

在＆＃34; getImage：function（item，template）{...＆＃34;

我添加了

return data;

之前

var att = document.createAttribute('data-zoom-image');
att.value = item.src;
img.setAttributeNode(att);

这很好用但只有一张图片。一旦有更多失败。不幸的是，我无法弄清楚自己需要的修改。任何帮助将受到高度赞赏。

祝你好运

尼基

Answer 1

我明白了！

我没有上面添加的代码，而是执行了以下操作：

在“getImage：function（item，template）{...”

中

就在

之前

_mfpTrigger('ImageLoadComplete');

我添加了

$("#" + item.img[0].id).elevateZoom();

在“close：function（）{...”

中

就在

之前

mfp.isOpen = false;

我添加了

$('.zoomContainer').remove();

在“getImage：function（item，template）{...”

中

我添加了

img.id = item.el[0].id;
var att = document.createAttribute('data-zoom-image');
att.value = item.src;
img.setAttributeNode(att);

之前

item.img = $(img).on('load.mfploader', onLoadComplete).on('error.mfploader', onLoadError);
img.src = item.src;

现在无论使用的图像数量如何，一切都有效。

祝你好运

Answer 2

谢谢你的演练！ 我建议添加

promotion.stream()
    .map(item->item.getDiscount()).filter(Objects::nonNull)
    .map(discount->discount.getPromotions()).filter(Objects::nonNull)
    .forEach(innerPromotion->{//logic code});

也在＆＃34; getImage：function（item，template）的开头{...＆＃34;， 所以当你滑过几张图片时，只有一个zoomContainer。