lightbox風のモーダルウィンドウについての質問です。

質問

lightbox風のモーダルウィンドウについての質問です。

質問させて頂きます。
●状況
小さくサムネイルの画像をクリックすると本来の大きさの画像がポップアップ表示させるものを作りたいです。
まんまlightboxだけど、クライアントさんが変なエフェクト（ウィーンとか）はいらないとおっしゃってきます。
なので簡単なモーダルウィンドウ風のものを構築したいと思っています。
そこでどうしても解決できない問題がおきてしまったのでお聞きしたいです。

■HTML↓-----------------------------------
<a href="photo1.jpg" class="modal"><img src="photo1_thum.jpg" alt="画像" width="100" height="100" /></a>

■SCRIPT↓-----------------------------------
$(function(){

$("body").append("<div id='glayLayer'></div><div id='overLayer'></div><p id='notes'>あああ</p>");

$("#glayLayer").click(function(){
$(this).hide();
$("#overLayer").hide();
$("#notes").hide();
});

$("a.modal").click(function(){
$("#glayLayer").show();
$("#overLayer").show().html("<img src='"+$(this).attr("href")+"' />");
$("#notes").show();
return false;
});

if($.browser.msie && $.browser.version<7){
$(window).scroll(function(){
$("#glayLayer").get(0).style.setExpression("top","$(document).scrollTop()+'px'");
$("#overLayer").get(0).style.setExpression("top","($(document).scrollTop()+$(window).height()/2)+'px'");
$("#notes").get(0).style.setExpression("top","($(document).scrollTop()+$(window).height()/2)+'px'");
});
}

});

■CSS↓-----------------------------------
div#glayLayer{
display:none;
position:fixed;
left:0;
top:0;
height:100%;
width:100%;
background: #000;
filter:alpha(opacity=60);
opacity: 0.60;
}

#overLayer{
display:none;
position: fixed;
top:50%;
left:50%;
margin-top:-***px; /*本来の画像の高さの半分*/ ←ココ
margin-left:-***px; /*本来の画像の横のサイズの半分*/ ←ココ
}

p {
display:none;
position: fixed;
top:50%;
left:50%;
margin-top:***px; /*本来の画像の高さの半分*/ ←ココ
margin-left:-***px; /*本来の画像の横のサイズの半分*/ ←ココ
}

* html div#glayLayer{ position:absolute; } /*FOR IE6*/
* html #overLayer{ position: absolute; } /*FOR IE6*/
* html #notes{ position: absolute; } /*FOR IE6*/

●質問
動き自体は完成しているのですが、本来の各画像のサイズがまちまちです。
そのため、CSSでブラウザの真ん中に表示させるために本来の画像の縦と横のサイズを取得したいと思うのですが
取得する方法はあるのでしょうか？
ひとつ解決策がのっているサイトを見つけたのですがコードがかなり長く理解不能でした。。
もし何か簡単な解決策を知っている方がいましたら教えて頂きたいです。
よろしくお願い致します。

回答No.1

fujillin

表示させずにnew　Image()で一度ロードして、そのwidth、heightを見れば元のサイズがわかると思いますが…
表示するのには、サイズ調整した後に、そのままappendしてあげればよろしいかと。

他にも方法はあると思いますが、↑ならたいして長くならないでしょう。