- 締切済み
window.openで横指定し縦は横にあわせて補正されるような仕組み
色ろ調べた結果、現在↓のような方法である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にして縦は縦横比をキープした高さになるようにしたいのです。 どなたかお分かりになられましたらお願いいたします。
- wf3255
- お礼率52% (90/172)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- is_may
- ベストアンサー率65% (58/89)
#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>' ); } 失礼いたしました。
- is_may
- ベストアンサー率65% (58/89)
普通にポップアップを表示する前に画像サイズを取得して計算しておけばいいと思います。 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>' ); } 画像の読み込みが行われる前に（キャッシュに入ってない時に）ウィンドウを表示してしまうとウィンドウサイズの縦幅がおかしくなります。 小さなサムネイル画像をクリックするのであれば問題なさそうですが・。
お礼
完璧なご回答、心より感謝いたします。 ホントに助かりました。 ありがとうございました。