求助：使用jQuery更新Elevate Zoom图片data-zoom-image属性失败

我之前用Elevate Zoom的时候也踩过一模一样的坑，你的问题其实出在两个关键点上：

1. jQuery的.data()不会同步更新DOM属性：你用$('#zoom_Photo').data('zoom-image',imgSrc)只是修改了jQuery内部维护的数据对象，并没有真正改变DOM元素上的data-zoom-image属性，插件读取的还是初始化时的原始DOM属性值。
2. Elevate Zoom会缓存初始配置：插件在初始化阶段就把data-zoom-image的值缓存到了内部，就算你后来手动修改了DOM属性，插件也不会自动去读取新值。

正确解决方案：用插件自带的swapImage方法 #

Elevate Zoom专门提供了swapImage方法来处理图片切换需求，能同时更新主图和缩放图，比手动改属性靠谱太多。

第一步：完善缩略图的data属性

给每个缩略图加上对应的高清图地址（如果不想额外加属性，后面可以用字符串替换生成）：

<div id="additional-Photos">
 <img src="thumb1.jpg" data-pop="NormalSizeThumb1.jpg" data-zoom="BigSizeThumb1.jpg" />
 <img src="thumb2.jpg" data-pop="NormalSizeThumb2.jpg" data-zoom="BigSizeThumb2.jpg" />
 <img src="thumb3.jpg" data-pop="NormalSizeThumb3.jpg" data-zoom="BigSizeThumb3.jpg" />
</div>

第二步：修改jQuery点击事件代码

$('#additional-Photos img').click(function(){
  // 获取缩略图对应的主图和高清图地址
  var mainImgSrc = $(this).data('pop');
  var zoomImgSrc = $(this).data('zoom');
  
  // 获取Elevate Zoom的实例对象
  var zoomPlugin = $('#zoom_Photo').data('elevateZoom');
  
  // 调用swapImage方法完成图片切换
  zoomPlugin.swapImage(mainImgSrc, zoomImgSrc);
});

如果你不想加额外的data属性 #

可以通过字符串替换自动生成高清图地址（假设你的命名规则是NormalSizeXXX.jpg对应BigSizeXXX.jpg）：

$('#additional-Photos img').click(function(){
  var mainImgSrc = $(this).data('pop');
  // 替换字符串生成对应高清图地址
  var zoomImgSrc = mainImgSrc.replace('NormalSize', 'BigSize');
  
  var zoomPlugin = $('#zoom_Photo').data('elevateZoom');
  zoomPlugin.swapImage(mainImgSrc, zoomImgSrc);
});

补充说明：为什么原来的方法无效？ #

• 用.attr('src', imgSrc)能改主图是因为浏览器会实时响应src属性的变化，但插件的缩放功能依赖的是自身缓存的高清图地址，不会实时读取DOM属性。
• .data('zoom-image', ...)只是操作jQuery的内部数据容器，和DOM元素上的data-zoom-image属性完全是两个独立的东西，插件根本读不到这个修改。

内容的提问来源于stack exchange，提问作者kamran shah