无法重新更改Javascript属性的值

Question

I have two images which I'm toggling and a zoom on those images is supposed to be displayed according to the selected image. On the first page load everything works fine (image appears, zoom appears). After I click the image, the image swaps and the zoom works fine as well. However, if I click again, I'm getting the image toggled correctly, but the zoom image does not refresh even for further clicks (keep displaying the zoom for the 2nd loaded image). I'm trying to change the attributes of data-zoom-image but no luck. Any suggestions?

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

I assume that you are using this library . Is this the case?

In my demo i copied your code and currently

• it toggles the images.
• Your function pageLoad() calls a function zooming() but the code you provided does not execute pageLoad and the function zooming() is missing.
• The call to elevateZoom is not working for me. Are you missing a reference?

If you are using elevateZoom than you have to provide the URL for the larger Image

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

Their exsample Gallery & Lightbox seems to me that it comes close what you are looking for:

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

And the matching 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;
});

Please ask additional questions or comment if i misunderstood you.