window.openで横指定し縦は横にあわせて補正されるような仕組み

締切済

質問者：wf3255
質問日時：2007/05/11 17:51
回答数：2件

色ろ調べた結果、現在↓のような方法であるWEBページ内の画像をクリックしたらポップアップ画像が画像サイズ画面になって表示されるようにしています。
＝＝＝＝＝＝＝＝＝＝＝
function openImageSizedWindow(src){
var i = new Image(); i.src = src;
var pop_win = window.open(
"",
"_blank",
"width=600,height=100%,scrollbars=yes,resizable=yes"
);
pop_win.window.document.write(
'<html>'
+'<head><title>'+i.alt+'</title></head>'
+'<body style="margin:0;pading:0;border:0;">'
+'<img src="'+i.src+'" width="100%" alt="" />'
+'</body>'
+'</html>'
);
}
＝＝＝＝＝＝＝＝＝＝＝
これをなんとかしてウィンドウも画像も横を600にして縦は縦横比をキープした高さになるようにしたいのです。
どなたかお分かりになられましたらお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： is_may
回答日時：2007/05/11 21:57

#1のものです。

document.witeする内容がおかしかったので直しました。

function openImageSizedWindow(src){
var i = new Image();
i.src = src;
wh=Math.floor(i.height*(600/i.width));
var pop_win = window.open(
"",
"_blank",
"width=600,height="+wh+",scrollbars=yes,resizable=yes"
);
pop_win.window.document.write(
'<html>'
+'<head><title>'+i.alt+'</title></head>'
+'<body style="margin:0;pading:0;border:0;">'
+'<img src="'+i.src+'" width="100%" alt="" />'
+'</body>'
+'</html>'
);
}

失礼いたしました。

- 0
- 件

通報する

この回答へのお礼

完璧なご回答、心より感謝いたします。
ホントに助かりました。
ありがとうございました。

通報する

お礼日時：2007/05/12 03:53

No.1

回答者： is_may
回答日時：2007/05/11 21:55

普通にポップアップを表示する前に画像サイズを取得して計算しておけばいいと思います。

function openImageSizedWindow(src){
var i = new Image();
i.src = src;
wh=Math.floor(i.height*(600/i.width));
var pop_win = window.open(
"",
"_blank",
"width=600,height="+wh+",scrollbars=yes,resizable=yes"
);
pop_win.window.document.write(
'<html>'
+'<head><title>'+i.alt+'</title></head>'
+'<body style="margin:0;pading:0;border:0;">'
+'<img src="'+i.src+'" id="lis" style="display:none;">'
+'<img src="'+i.src+'" width="100%" alt="" id="main" />'
+'</body>'
+'</html>'
);
}

画像の読み込みが行われる前に（キャッシュに入ってない時に）ウィンドウを表示してしまうとウィンドウサイズの縦幅がおかしくなります。
小さなサムネイル画像をクリックするのであれば問題なさそうですが・。