-1

快速介绍：我使用 jQuery.elevateZoom-3.0.8 来显示放大的图片。

  1. SRC 属性是较小/正常图像的路径

  2. DATA-ZOOM-IMAGE 属性是指向更大图像的路径，用作缩放。

HTML 代码如下：

  <section id="designer-single" class="col-md-7" >
    <div class="magnifier-thumb-wrapper mc">
      <img class="front-magnify"  
      src="../../public/img/burn/purple-front.png"
      data-zoom-image="../../public/img/burn/purple-front-lg.png">
    </div>
 </section>
 <button class='back-image'>Click me</button>

现在我想在用户按下按钮时改变图像。较小的图像会改变（SRC 属性），但较大的图像不会刷新（数据缩放图像属性），即使我用 jQuery 更改它。

$('.back-image').on('click', function(){
    $('.front-magnify').attr('src', 'public/img/burn/purple-back.png');
    $('.front-magnify').attr('data-zoom-image', 'public/img/burn/purple-back-lg.png');
});

问题是：如何在 elevateZoom.js 中更新自定义属性“data-zoom-image”的状态，以便它在DOM 上更新？

https://i.stack.imgur.com/hFvG7.png => 无需点击

https://i.stack.imgur.com/r0tUw.png => 更改时

Codepen 示例： https ://codepen.io/kenanbalija/pen/MojOEp

4

1 回答 1

1

问题似乎是您成功地更改了属性，但 elevateZoom.js 中的代码是根据原始值进行初始化的，并且没有关注更改。

根据您在下面的评论和对插件源代码的快速浏览，我之前的猜测（通过.elevateZoom再次调用或使用responsive选项来重新实例化插件）将不起作用。这是一个一次性插件，它实际上并不是为了在实例化后可控，所以你的选择非常有限。

在用新插件替换它并重新实例化插件之前，您可以暴力破解并销毁现有插件（通过删除整个 DOM 元素）。

或者，由于您似乎在两个不同的可缩放图像之间切换，因此单独实例化它们并根据需要隐藏/显示每个图像可能更简单，类似于

$('.image').on('click', function(){
  $('.front-magnify, .back-magnify').toggleClass('hidden');
})

当然，这将是带宽和代码复杂性之间的权衡。

于 2017-06-14T13:53:05.490 回答