jQuery 如何更改数据缩放图像值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19110330/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change data-zoom-image value
提问by Hashir Hussain
I'm using elevate zoom effects for zooming facility of image, my image tag is:
我正在使用提升缩放效果来缩放图像，我的图像标签是：
<img id="zoom_01"
src='New folder/small/image.jpg'
data-zoom-image="New folder/large/image.jpg">
and elevatezoom script is:
和 elevatezoom 脚本是：
<script>
$("#zoom_01").elevateZoom({scrollZoom : true});
</script>
I have many images that I want to zoom, with same id,src value is changing but I couldn't change data-zoom-image value.How do change data-zoom-image value,you can also visit any [e coomerce website]that what I'm trying to tell.1
我有很多想要缩放的图片，id 相同，src 值正在更改，但我无法更改 data-zoom-image 值。如何更改 data-zoom-image 值，您也可以访问任何 [e coomerce 网站] 那就是我想说的。1
回答by Zoran Majstorovic
After change of data zoom-image attribute, you need to re-initialize with elevateZoomlike this:
更改数据缩放图像属性后，您需要elevateZoom像这样重新初始化：
$("#zoom_01").data('zoom-image', 'newURL').elevateZoom({
responsive: true,
zoomType: "lens",
containLensZoom: true
});
回答by Malkhaz Gholijashvili
If you want change image which shown as zoomed, simply do this
如果您想更改显示为缩放的图像，只需执行此操作
$('.zoomWindowContainer div').stop().css("background-image","url("+ changed_image +")");
回答by Naveed Butt
I think you need this...
我想你需要这个...
$("#zoom_01").attr('data-zoom-image', 'new path');
回答by mompou
I was having exactly the same problem here, figured it out: it probably doesn't work because the plugin doesn't support changing that particular attribute - it has its own gallery functionality. There are errors in their own documentation, this is how it works:
我在这里遇到了完全相同的问题，想通了：它可能不起作用，因为该插件不支持更改该特定属性 - 它有自己的画廊功能。他们自己的文档中有错误，这是它的工作原理：
HTML for main image & thumbnails:
主图像和缩略图的 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 for initializing the gallery:
用于初始化图库的 jQuery：
$("#bigpic").elevateZoom({
gallery:'gal1',
galleryActiveClass: 'active'
- plus whatever other attributes you want to give it
- 加上你想赋予它的任何其他属性
jQuery for passing the images to the main container:
用于将图像传递到主容器的 jQuery：
$("#bigpic").bind("click", function(e) {
var ez = $('#bigpic').data('elevateZoom');
$.fancybox(ez.getGalleryList());
return false;
});
I'm new to jQuery and I don't really 100% understand the mechanics here, but that's how I got it to work, I hope it works for you!
我是 jQuery 的新手，我并不是 100% 了解这里的机制，但这就是我让它工作的方式，我希望它对你有用！
回答by Priya Gupta
Include the following code in js and it may solve your problem In variable smallImage give the url of the new small image and in largeImage give the url of new large image. Hope this solves your problem without reintializing your elevate zoom.
在 js 中包含以下代码，它可能会解决您的问题 在变量 smallImage 中给出新小图像的 url，在 largeImage 中给出新大图像的 url。希望这可以解决您的问题，而无需重新初始化您的提升变焦。
var ez = $("#zoom_01").data("elevateZoom");
ez.swaptheimage(smallImage, largeImage);
回答by nizarb
you have just to use the gallery feature provided by the plugin itself, just wrap your images into a container
您只需使用插件本身提供的图库功能，只需将您的图像包装到容器中
<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>
then you have to call the plugin like this:
那么你必须像这样调用插件：
$("#zoom_x").elevateZoom({ gallery: "my_images", zoomType : "inner", cursor: "crosshair", imageCrossfade: true });
回答by Hossein Haji Mali
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();
