動的画像の幅と高さを取得する

Question

私はimgタグを隠しdivに埋め込みました。ユーザーがイメージ名を持つ動的なハイパーリンクをクリックすると、イメージがモーダルウィンドウで表示される必要があります。モーダルウィンドウ内にdivを配置するには、画像の高さが必要です。しかし、ハイパーリンクをクリックすると、srcが割り当てられた後、高さが0になります。そのため、画像を中央に揃えることはできません。画像がブラウザに表示される前に、画像の幅を取得するのを手伝ってください。

<div id="imgFullView" class="modal_window imgFullView"> 
    <img alt="Loading..." id="imgFull" /> 
</div> 

function ShowImage(imgSrc) { 
    $("#imgFull").attr("src", imgSrc); 
    alert($("#imgFull").height()); 
    $("#imgFullView").width($("#imgFull").width()); 
    $("#imgFullView").height($("#imgFull").height()); 
    show_modal('imgFullView', true); 
} 

このshowimageメソッドは、ハイパーリンクのonclickと呼ばれます。事前のおかげで ...すべてのウルの専門家の指導の後、私のために働いた

ソリューション...

function ShowImage(imgSrc) { 
    $("#imgFull").removeAttr("src"); //To remove the height and width of previously showed imaged from img tag. 
    $("#imgFull").attr("src", imgSrc); 
    $("#imgFullView").width(document.getElementById("imgFull").width); 
    $("#imgFullView").height(document.getElementById("imgFull").height); 
    show_modal('imgFullView', true); 
} 

Answer 1

これを試してください。

var img = $("imgFull")[0]; // Get my img elem 
    var real_width, real_height; 
    $("<img/>") // Make in memory copy of image to avoid css issues 
     .attr("src", $(imgFull).attr("src")) 
     .load(function() { 
      real_width = this.width; // Note: $(this).width() will not 
      real_height = this.height; // work for in memory images. 
     }); 

ありがとう。ここ

function ShowImage(imgSrc){ 
$('<img id="imgFull" />').bind('load', 
    function(){ 
     if (!this.complete || this.naturalWidth == 0) { 
      $(this).trigger('load');  
     } else { 
      $(this).appendTo('#imgFullView') 
$('#imgFullView').width(this.naturalWidth).height(this.naturalHeight); 
     }  
    }).attr("src",imgSrc); 
} 

$(document).ready(function(){ ShowImage('http://www.google.com/images/logos/ps_logo2.png') }); 

デモ：：。これは、過去に私のために働いてい

Answer 2

うーん、問題はあなたがhasn画像の大きさを知ることができないということですまだロードされていません。

・ホープ、このことができます）我々は画像が（そのサイズを取得しようとする前にロードが完了確保​​で

function ShowImage(imgSrc) { 
    $("#imgFull").attr("src", imgSrc); 
    $("#imgFull").load(function(){ //This ensures image finishes loading 
    alert($("#imgFull").height()); 
    $("#imgFullView").width($("#imgFull").width()); 
    $("#imgFullView").height($("#imgFull").height()); 
    show_modal('imgFullView', true); 
    }); 
} 

：これを試してみてください。乾杯。

Answer 3

画像が隠されているとき

http://jsfiddle.net/jyVFc/4/