数据放大:为“jQuery -magnify src”添加相同的图像

Question

我使用jQuery在lightbox中嵌入项目。现在我想添加Magnify。

图像标记最后应该如下所示：

<img src="myimage.jpg" data-magnify-src="myimage.jpg"/>

src="myimage.jpg"工作正常。我想为data-magnify-src添加相同的图像(在相同的大小)。

这是我的尝试：

​

function openLightbox(element) {
  lightboxItem($(element).next().html());
  if (element && element.src) {
    const img = $("#lightbox img")[0];
    img.src = element.src;
    // img.data-magnify-src = element.src; ~ Does not work.
  }
}

<div id="lightbox">
  <img class="zoom"/>
</div>

​

data-magnify-src的图像应该与src的图像相同。

如果有人能帮我，我会很高兴的！:)

Answer 1

使用您的html

<div id="lightbox">
  <img src="yourImage.jpg" class="zoom"/>
</div>

function openLightbox(element) {
  lightboxItem($(element).next().html());
  if (element && element.src) {
    const img = $("#lightbox img");
    const src = img.attr('src');
    img.data('magnify-src', src);
    $('.zoom').magnify(); // you need to re init after adding the data attr
  }
}