Question

我有两张我正在切换的图像，并且应该根据所选图像显示这些图像的缩放。在第一页加载一切正常（图像出现，缩放出现）。单击图像后，图像交换，缩放也可以正常工作。但是，如果我再次单击，我将正确切换图像，但即使进一步单击也不会刷新缩放图像（继续显示第二个加载图像的缩放）。我正在尝试更改数据缩放图像的属性，但没有运气。有什么建议吗？

function pageLoad(sender, args) {
    zooming();
}
function chngimg(x) {

       if ($("#zoom_mw").attr("src") == x) {

           var rimage;
           rimage = $("#zoom_mw").attr('rearimage');

           $("#zoom_mw").attr("src", rimage);
           $("#zoom_mw").removeAttr("data-zoom-image");

           $("#zoom_mw").attr("data-zoom-image", rimage);
           $("#zoom_mw").elevateZoom({ scrollZoom: true });
       } else  {
           var fimage;
           fimage = $("#zoom_mw").attr('frontimage');
           $("#zoom_mw").attr("src", fimage);

           $("#zoom_mw").attr("data-zoom-image", fimage);

           $("#zoom_mw").elevateZoom({ scrollZoom: true });
       }
   }

<img style="border:1px solid #e8e8e6;" id="zoom_mw" 
onclick="chngimg('<%= Session("ImagePathFront")%>')"
frontimage='<%= Session("ImagePathFront")%>'
rearimage='<%= Session("ImagePathRear")%>'
    src='<%= Session("ImagePathFront")%>'   
    width="500" height="250"  />

Answer 1

我假设您使用 this library 。是这种情况吗？

在my demo i copied your code和当前

它切换图像。
您的函数pageLoad()调用函数zooming()，但您提供的代码不执行pageLoad，并且缺少函数zoomoming（）。
致elevateZoom的电话对我不起作用。你错过了参考文献吗？

如果您使用 elevateZoom ，则必须提供较大图片的网址

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

他们exsample Gallery & Lightbox在我看来，它正在寻找你想要的东西：

<img id="img_01" 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 id="img_01" src="thumb/image1.jpg" />
  </a>

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

和匹配的javascript

//initiate the plugin and pass the id of the div containing gallery images
$("#zoom_03").elevateZoom({gallery:'gallery_01', 
        cursor: 'pointer', galleryActiveClass: 'active'
        , imageCrossfade: true
        , loadingIcon: 'http://www.elevateweb.co.uk/spinner.gif'}); 

//pass the images to Fancybox
$("#zoom_03").bind("click", function(e) {  
  var ez =   $('#zoom_03').data('elevateZoom'); 
    $.fancybox(ez.getGalleryList());
  return false;
});

如果我误解你，请提出其他问题或评论。

无法重新更改Javascript属性的值

1 个答案: