如何更改数据缩放图像值答案

【问题标题】：How to change data-zoom-image value如何更改数据缩放图像值
【发布时间】：2013-10-07 06:24:51
【问题描述】：

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

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

elevatezoom 脚本是：

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

我有很多图像要缩放，具有相同的 id，src 值正在更改，但我无法更改 data-zoom-image 值。如何更改 data-zoom-image 值，您也可以访问任何 [ e coomerce website]这就是我想说的。1

【问题讨论】：

标签： javascript jquery html image

【解决方案1】：

数据zoom-image属性改变后，需要像这样用elevateZoom重新初始化：

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

【讨论】：

我知道这已经过时了，但我想让你知道这是天赐之物。非常感谢。
您好，我收到此错误：index.html:218 Uncaught TypeError: $(...).data(...).elevateZoom is not a function at myFunction (index.html:218)在 HTMLImageElement.onclick (index.html:168)
@FernandoPie，您是否在页面上包含了 jQuery 和插件？在此处查看演示：github.com/elevateweb/elevatezoom/blob/master/demo.html#L6-L7

【解决方案2】：

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

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

【讨论】：

谢谢，这就是我在更改缩放缩略图图像后使用 elevateZoom 插件更改缩放图像的方法。

【解决方案3】：

我认为你需要这个...

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

【讨论】：

它不起作用... data-zoom-image 不是 img 标签中使用的实际属性。我下载了提升缩放。
即使它不是原始属性。它应该工作。请分享一些您尝试修改标签和图像src的代码
我有三张小图作为缩略图和一张大图...这是其中一张小图 .我想用小图的data-zoom-image更改大图的data-zoom-image值
该函数在小图标签的onClick上调用，函数changeImg(src,id) { document.getElementById(id).src=src; $(id).attr('data-zoom-image',src); }
我认为您在使用 JQuery 时需要在 id 之前添加 # 符号。 $('#' + id).attr(...)

【解决方案4】：

我在这里遇到了完全相同的问题，我想通了：它可能不起作用，因为插件不支持更改该特定属性 - 它有自己的画廊功能。他们自己的文档中有错误，这是它的工作原理：

主图像和缩略图的 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").elevateZoom({
gallery:'gal1',
galleryActiveClass: 'active'

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

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

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

我是 jQuery 新手，我并不是 100% 了解这里的机制，但这就是我让它工作的方式，我希望它对你有用！

【讨论】：

【解决方案5】：

在js中包含以下代码，它可能会解决您的问题在变量 smallImage 中给出新小图像的 url 并在 largeImage 中给出新大图像的 url。希望这可以在不重新初始化提升缩放的情况下解决您的问题。

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

【讨论】：

【解决方案6】：

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

<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>

那么你必须像这样调用插件：

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

【讨论】：

【解决方案7】：

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();

【讨论】：