Question

我正在尝试更改动态创建的标记的data-zoom-image属性，但这里的不成功是以下代码：

这里是我创建（它是一个onclick事件）标签：

$("#ImageBingingDiv").html('<img id="toZoom" style=" box-shadow: 3px 3px 1px #ccc;" src="'+id+'"   data-zoom-image="'+ id+'" width="'+widthD+'px" height="'+heightD+'" margin="10px"alt=""/>');
$("#ImageBingingDiv").css('height',heightD+12+'px').css('vertical-align','center');
$("#toZoom").on('click', function(){
       $("#toZoom").elevateZoom({

        zoomWindowFadeIn: 500,
        zoomWindowFadeOut: 500,
        lensFadeIn: 500,
        lensFadeOut: 500
});  
});

，这是另一个点击它应该改变的地方：

$("#toZoom").fadeOut('fast', function () {
      $("#toZoom").attr('src', id);
      $("#toZoom").attr('data-zoom-image', id); 
      $("#toZoom").fadeIn('fast');
 });

所以一切都会改变，除了缩放保持旧的数据缩放图像值。我正在使用elevatezoom插件。

Answer 1

$("#ImageBingingDiv").html('<img id="toZoom"  style=" display:none;box-shadow:3px 7px 7px rgba(0, 0, 0,0.5);'+curs+' '+marginD+'"  src="./somepath/'+id+'.'+$("#"+id).data("typeim")+'"   data-zoom-image="./somepath/'+ id+'.'+filetype+'" width="'+widthD+'" height="'+heightD+'" alt=""/>'+infoDiv);
$("#ImageBingingDiv").css('height',heightD+12+'px').css('vertical-align','center');

if($("#"+id).data("hwtype")=="h"){
$("#toZoom").on('click', function(){
    if($(".zoomContainer").length == 0 && $( window ).height()<1010) {
     if($("#"+id).data("hwtype")=="w"){
             $("#toZoom").elevateZoom({
              zoomType: "lens",
              lensShape : "rechtangle",
              lensSize    : 200 

            });         
         }
     else{
      $("#toZoom").elevateZoom({
                zoomWindowFadeIn: 500,
                zoomWindowFadeOut: 500,
                lensFadeIn: 500,
                lensFadeOut: 500
            });         
     }
     $("#toZoom").off('click');
    }
}); 
setTimeout(function (){
 $("#toZoom").css("cursor", "url(./images/css/zoom1.png),auto"); 
     },100); 
}   

$("#toZoom").fadeIn(300);
});

Answer 2

更改属性不会执行任何操作。你想要做的是告诉插件实际上为你改变缩放。

查看插件文档本身，我看不到你应该调用的任何特定方法，我建议你在更改了zoom属性之后尝试重新启动插件，如下所示：

$("#toZoom").fadeOut('fast', function () {
      $(this)
        .attr('src',id)
        .attr('data-zoom-image',id)
        .elevateZoom({ /* your default zoom options here */ })
        .fadeIn('fast');
 });

Answer 3

添加我的答案可能为时已晚，但今天我遇到了像你这样的问题，我在this link找到了一个很酷且简单的解决方案：

打开 jquery.elevatezoom.js 文件
您可以在上面找到这一行：

self.imageSrc = self。$ elem.data（“zoom-image”）？ self。$ elem.data（“zoom-image”）：self。$ elem.attr（“src”）;
将其替换为以下代码：

self.imageSrc = self。$ elem.attr（“src”）;
清除浏览器缓存并享受。

注意：此解决方案仅在您的大图和小图片合为时才可用。

尝试更改动态创建的<img/>的data-zoom-image属性

3 个答案: