javascript - 将 MagnificPopup 与 ElevateZoom 结合起来

Question

各位 JavaScript/jquery 专家大家好。

我希望有人能够帮助我，因为我在尝试结合时遇到了困难 MagnificPopup与 ElevateZoom .

如果只有一张图像，我就可以让 ElevateZoom 工作。但在画廊模式(几张图像)下，它会严重失败。

这是一个使用一张图像的示例。

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

我对 magnificpopup.js 做了一些更改:

在“打开:函数(数据){...”

我已添加

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

就在

之前

return data;

在“getImage:函数(项目，模板){...”

我已添加

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 1

我明白了!

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

在“getImage:函数(项目，模板){...”

就在之前

_mfpTrigger('ImageLoadComplete');

我已添加

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

在“close: function () {...”

就在之前

mfp.isOpen = false;

我已添加

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

在“getImage:函数(项目，模板){...”

我已添加

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;

现在，无论使用多少图像，一切都可以正常工作。

致以诚挚的问候