javascript - 如何更改数据缩放图像值

Question

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

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

和提升缩放脚本是：

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

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

Answer 1

更改数据缩放图像属性后，您需要重新初始化，elevateZoom如下所示：

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

Answer 2

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

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

Answer 3

我觉得你需要这个...

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

Answer 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% 了解这里的机制，但这就是我让它工作的方式，我希望它对你有用！

Answer 5

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

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

Answer 6

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

Answer 7

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