이미지 변경 원본 속성, jQuery의 높이와 너비를 구하십시오.

Question

한 번에 하나의 큰 이미지가 표시되는 매우 간단한 이미지 갤러리가 있습니다. 주 이미지의 오른쪽에있는 큰 캡션을 이미지 자체에 가까이 배치하려고합니다. 주 이미지가 수평 인 경우 캡션이 맨 오른쪽에 있습니다. 기본 이미지가 수직 인 경우 캡션은 DIV 오른쪽에서 약 30px입니다.

썸네일을 클릭하면 새 이미지가 만들어지고로드됩니다. 그런 다음 주 이미지의 원본 특성을 변경하고 차원을 가져 와서 그에 따라 캡션을 배치하려고합니다. 그러나 다른 크기의 이미지를 클릭하면 이전 이미지의 크기 만 표시됩니다. 같은 이미지를 다시 클릭하면 작동합니다. 여기

는 jQuery-

$("#apparatus_thumbs a").click(function() { 
      var src = $(this).attr("href"); 
      var caption = $(this).attr("title"); 
      var wrap = $("#apparatusPhoto").fadeTo("medium", 0.5); 
      var img = new Image(); 
      $(img).load(function() { 
       wrap.fadeTo('fast', 1); 
       $("#apparatusPhoto").attr('src', src); 
       var height = $("#apparatusPhoto").height(); 
       var width = $("#apparatusPhoto").width(); 
       if (height > width) { 
        $("#apparatusPhotoCaption").css('right', '150px'); 
       } else { 
        $("#apparatusPhotoCaption").css('right', '0px'); 
       } 
       if (caption != '') { 
       $("#apparatusPhotoCaption").html(caption); 
       $("#apparatusPhotoCaption").fadeIn('slow'); 
       } else { 
        $("#apparatusPhotoCaption").fadeOut('slow'); 
       } 
       console.log('image loaded'); 
      }).attr('src', src); 
      return false; 
     }); 

어떤 아이디어인가?

업데이트 이것은 작동하는 것 같습니다. 이미지를 제거한 다음 새 이미지를 추가하여 원하는 결과를 얻은 것 같습니다. 당신이 뭔가에 이미로드 된 값에서 이미지 .src을 변경할 때 .load() 안정적으로 모든 브라우저에서 실행됩니다 경우

$("#apparatus_thumbs a").click(function() { 
      var src = $(this).attr("href"); 
      var caption = $(this).attr("title"); 
      var wrap = $("#apparatusPhoto").fadeTo("medium", 0.5); 
      var img = new Image(); 
      $(img).load(function() { 
       wrap.fadeTo('fast', 1); 
       $("#apparatusPhoto").find('img').remove(); 
       $("#apparatusPhoto").append(img); 
       var height = $("#apparatusPhoto img").height(); 
       var width = $("#apparatusPhoto img").width(); 
       if (height > width) { 
        $("#apparatusPhotoCaption").css('right', '150px'); 
       } else { 
        $("#apparatusPhotoCaption").css('right', '0px'); 
       } 
       if (caption != '') { 
       $("#apparatusPhotoCaption").html(caption); 
       $("#apparatusPhotoCaption").fadeIn('slow'); 
       } else { 
        $("#apparatusPhotoCaption").fadeOut('slow'); 
       } 
       console.log('image loaded'); 
      }).attr('src', src); 
      return false; 
     }); 

Answer 1

는 잘 모르겠어요.

이전에는 문제가 있었고 새 이미지 객체를 만들고 해당 객체에 새 URL을로드 한 다음 새 객체에 load 이벤트를 사용하고 이전 이미지 객체를 새 이미지 객체로 교체해야했습니다.