Javascript 如何更改数据缩放图像值

我正在使用提升缩放效果来缩放图像，我的图像标签是：

<img id="zoom_01"
 src='New folder/small/image.jpg'
 data-zoom-image="New folder/large/image.jpg">

而ElevateToom脚本是：

<script>
    $("#zoom_01").elevateZoom({scrollZoom : true});
</script>

$（“#zoom_01”）.elevateToom（{scrollZoom:true}）；

---

我有许多图像要缩放，id相同，src值正在更改，但我无法更改数据缩放图像值。如何更改数据缩放图像值，您也可以访问我想告诉您的任何[e coomerce网站]。

我想您需要这个

$("#zoom_01").attr('data-zoom-image', 'new path');

---

我在这里遇到了完全相同的问题，我发现：它可能不工作，因为插件不支持更改特定属性-它有自己的库功能。他们自己的文档中存在错误，其工作原理如下：

主图像和缩略图的HTML：

<img id="bigpic" src="small/image1.jpg" data-zoom-image="large/image1.jpg"/>

<div id="gal1">

<a href="#" data-image="small/image1.jpg" data-zoom-image="large/image1.jpg">
<img src="thumb/image1.jpg" />
</a>

<a href="#" data-image="small/image2.jpg" data-zoom-image="large/image2.jpg">
<img src="thumb/image2.jpg" />
</a>

</div>

• 再加上你想赋予它的任何其他属性

用于将图像传递到主容器的jQuery：

$("#bigpic").bind("click", function(e) {  
var ez =   $('#bigpic').data('elevateZoom');    
$.fancybox(ez.getGalleryList());
return false;
});

---

我是jQuery的新手，我并不是100%理解这里的机制，但我就是这样让它工作的，我希望它能为您工作

如果要更改显示为缩放的图像，只需执行此操作

$('.zoomWindowContainer div').stop().css("background-image","url("+ changed_image +")");

---

更改数据缩放图像属性后，需要使用

elevateToom

重新初始化，如下所示：

$("#zoom_01").data('zoom-image', 'newURL').elevateZoom({
   responsive: true,
   zoomType: "lens", 
   containLensZoom: true
}); 

$("#zoom_x").elevateZoom({ gallery: "my_images", zoomType   : "inner", cursor: "crosshair", imageCrossfade: true });

---

在js中包含以下代码，它可能会解决您的问题 在变量smallImage中，给出新小图像的url 并在大图像中给出新大图像的url。 希望这能解决您的问题，而无需重新调整您的缩放

var ez = $("#zoom_01").data("elevateZoom");
ez.swaptheimage(smallImage, largeImage);

---

您只需使用插件本身提供的gallery功能，只需将图像包装到容器中即可

<img src="img1-small.jpg" id="zoom_x" data-zoom-image="img1-large.jpg">
<div id="my_images">
<a href="#" data-image="img1-small.jpg" data-zoom-image="img1-large.jpg"><img src="img1-small.jpg" alt=""></a>
<a href="#" data-image="img2-small.jpg" data-zoom-image="img2-large.jpg"><img src="img2-small.jpg" alt=""></a>
...
</div>

---

它不起作用了。。。数据缩放图像不是img标签中使用的实际属性。我下载了提升缩放。即使它不是原始属性。它应该会起作用。请分享一些代码，你正在试图修改标签和图片的src我有三个小图片作为缩略图和一个大图片。。。这是一个小图像。我想用小图像的数据缩放图像更改大图像的数据缩放图像值。单击小图像标记时调用此函数，函数changeImg（src，id）{document.getElementById（id）.src=src；$（id）.attr（'data-zoom-image'，src）；}我认为在使用JQuery时，您需要在id之前添加签名<代码>$（'#'+id）.attr（…）Thx，这就是我在更改缩放缩略图后希望使用ElevateToom插件更改缩放图像的原因。我知道这太旧了，但我想让你知道这是天赐之物。非常感谢。您好，我收到了这个错误：index.html:218 Uncaught TypeError:$（…）.data（…）.elevateToom不是HTMLImageElement.onclick（index.html:168）@FernandoPie的myFunction（index.html:218）中的函数，您在页面上包含jQuery和插件了吗？请参见此处的演示：

$("#zoom_x").elevateZoom({ gallery: "my_images", zoomType   : "inner", cursor: "crosshair", imageCrossfade: true });

var zoomElement = $('#zoom_01');

// destroy old one
zoomElement.removeData('zoom-image');
$('.zoomContainer').remove();

// set new one
zoomElement.attr('data-zoom-image', image_large_size);
zoomElement.attr('src', image_normal_size);

// reinitial elevatezoom
zoomElement.elevateZoom();