画像と同じサイズの窓を開きたいのですが、画像サイズが不定なのでScript内でサイズ指定はできません。
枚数が多いのでHTML内に関数の引数として記述するのも避けたいです。
そこで「画像の縦横を取得→窓を開く→窓をリサイズ」という方法を考えましたが
画像を読み込んでから縦横を取得するように書き換えたいです。
function popup(url){
newPic = new Image();
newPic.src = url;
var w = newPic.width;
var h = newPic.height;
var Size = ”width=” + w + ”,height=” + h;
var newWin=window.open(url,”nWin”,Size);
newWin.resizeTo(w,h);
newWin.document.open();
newWin.document.write(”<html><head><title>サイト名</title></head>”);
newWin.document.write(”<body style=’margin:0px; padding:0px;’><img src=”+url+”></body></html>”);
newWin.document.close();
}
アドバイスをよろしくお願いします。
No.1
19
0
20pt
参考URLにわたしが作ったものがあるので参考にどうぞ。
それと、あなたのJSは以下のようにすると、画像のサイズにリサイズできます。(document.write時にimgにnameで名前を付けてあげ、それを元にサイズを取得します。)
function popup(url){
newPic = new Image();
newPic.src = url;
var w = newPic.width;
var h = newPic.height;
var Size = ”width=” + w + ”,height=” + h;
var newWin=window.open(url,”nWin”,Size);
newWin.resizeTo(w,h);
newWin.document.open();
newWin.document.write(”<html><head><title>サイト名</title></head>”);
newWin.document.write(”<body style=’margin:0px; padding:0px;’><img src=”+url+”name=”img”></body></html>”);
newWin.document.close();
newWin.window.resizeTo(win.document.img.width,win.document.img.height);
}
No.2
570
20pt
resizeTo()は、ウィンドウの外側のサイズを設定します。
ウィンドウの内側のサイズを設定するには、ブラウザによって処理を振り分ける必要があります。
NetscapeやFireFoxの場合は、対象のウィンドウオブジェクトのinnerWidthとinnerHeightに、サイズを代入すれば良い様です。
IEの場合、値が設定できる同様のプロパティが見当たらなかったのですが、document.body.clientWidth/clientHeightで内側のサイズが取得できますので、一度、resizeTo()で外側のサイズを設定してから、内側のサイズとの差を求めてresizeBy()で大きさを変えるという方法があります。IEで事前にウィンドウの外側のサイズを知る方法があればresizeTo()一回だけでできますが、それらしいプロパティを見つけられませんでした。なお、document.body.clientWidth/clientHeightは、document.close()の前に参照する必要がある様です。
Safariでは、どうも上手く行きませんでした。すみません。
回答ありがとうございます。
こちらも字数制限によりやむなく説明を端折ってしまったのですが、
とりあえず、ブラウザごとの微調整はしています。
「画像が完全に読み込めたら」という処理を書く方法はないでしょうか…？
No.3
570
70pt
2件目の回答です。ポイントは2件合算で割り振って頂ければ結構です。
画像読み込みの完了を調べるには、Imageオブジェクトのcompleteプロパティを使います。読み込みが完了しているとTRUEになります。
ただし、ブラウザに依存する様で、Safariではundefinedとなってしまい、使えません。先ほどのサイズ設定が、Safariで上手く行かないのも、Imageオブジェクトからサイズが取得できないことが原因の様です。
２回目の回答ありがとうございます。
「Imageオブジェクトのcomplete」これをどこでどのタイミングでどう書けばよいのかを教えていただきたかったです…。
もしよろしかったらいわしででも、と思ったんですがウェブマスターはてなはいわし、使えないんでしょうか…。
No.4
1501
20pt
http://www.k2.dion.ne.jp/~jan2005/tips/slidepuzzle_index.html
JavaScriptでスライドパズル
どうも、画像の読み込みとリサイズのタイミングが合わないのが気持ちよくなかったので
違うアプローチをしていました。 いったん閉じて開くというものです。
検証は Win IE6 と Win Firefox1.06 です。
panana さんと同じように「読み込み完了しない場合の動作」が気になっていまして
調べた結果、リンク先の“img.complete”で得られるそうです。
ただタイマーだけは苦手でして、この先へ進めません。すみません。
<script>
var newWin;
function popup(url){
newPic = new Image();
newPic.src = url;
var w = newPic.width + 4;
var h = newPic.height + 4;
var Size = ”width=” + w + ”,height=” + h;
if ( newWin ) {
newWin.close();
}
newWin=window.open(””,”nWin”,Size);
newWin.document.open();
newWin.document.write(”<html><head><title>site_name</title></head>”);
newWin.document.write(”<body style=’margin:0px; padding:0px;background-color:#eee;’><center><img src=”+url+”></center></body></html>”);
newWin.document.close();
}
</script>
http://www.asagaotv.ne.jp/~kawasaki/js/jscripti.html
JavaScript���t�@�����X --I--
回答ありがとうございます。そうなんです…。
「小窓が開いていたら一回閉じて、新しく開きなおす」というのも考えたんですが、
その「小窓が開いていたら」が書けませんでした…。
＞ただタイマーだけは苦手でして、この先へ進めません。すみません。
いえいえ。この先も何も私、どこまで進んでるのかもわかりません…。
参考URLと書いていただいたJSをよく読み解いて勉強します。
ありがとうございました。
※ ところでこのようにfunction部分から飛び出してる宣言がある場合、
外部JSから呼び出す時はでよいのでしょうか？
質問ばかりでごめんなさい…。
No.5
190
No.6
1501
50pt
http://www.k2.dion.ne.jp/~jan2005/tips/
JavaScript実験室
前回の「JavaScriptでスライドパズル」のページを参考にさせて頂き完成にこぎつけました。
ソースの使用・改変・公開の条件に基づき、参考 URL にリンクを添えます。
ウィンドウの高さと幅は丼勘定でそれぞれ若干の余裕を追加しています。
余白が偏らないように背景画像として読み込ませることにしました。
おかげで表示ページ上をドラッグしても画像の選択やダウンロードにならない、
IE のイメージツールバーがかぶさってこない、というオマケもつきました。
“popup.js”の内容は以下の通り。
// popup:
// <a href=”javascript:void(0)” onClick=”javascript:popup(’<image_file>’);”>Click Here</a>
// thanks: http://www.k2.dion.ne.jp/~jan2005/tips/slidepuzzle_index.html
var newWin;
var newPic;
var imgTimerID;
var checkCount, checkCountMax = 10;
function popup(url){
newPic = new Image();
newPic.src = url;
window.status = ”画像読み込み中”;
checkCount = 0;
clearInterval(imgTimerID);
imgTimerID = setInterval(”loadImage(newPic.src)”, 500);
}
function loadImage(url) {
checkCount++;
if (newPic.complete || (checkCount > checkCountMax)) {
if (newPic.complete) {
window.status = ”画像読み込み完了”;
} else {
window.status = ”画像読み込み失敗”;
alert(”画像が読み込めませんでした。”);
}
clearInterval(imgTimerID);
showPage(url);
}
}
function showPage(url) {
var w = newPic.width + 20;
var h = newPic.height + 36;
var Size = ”width=” + w + ”,height=” + h;
if ( newWin ) {
newWin.close();
}
newWin=window.open(””,”nWin”,Size);
newWin.document.open();
newWin.document.write(’<html><head><title>site_name</title></head>’);
newWin.document.write(’<body style=”margin:0px;padding:0px;background-color:#eee;background:#eee url(’+url+’) no-repeat fixed center center;”>’);
newWin.document.write(”</body></html>”);
newWin.document.close();
newWin.resizeTo(w,h);
}
回答ありがとうございます。
見本ソースまで作っていただきありがとうございました！
ステータスバーに「読み込み中」などのメッセージが出るのが安心でいいですね！
おまけも素敵です^^
使ったことのないメソッドがたくさんあって、
どんな処理をしているのか想像程度にしかわからないのですが、
しっかり勉強してぜひ組み込んでみようと思います。ありがとうございました。
--------
sparitudaさん、トラックバックでの回答、ありがとうございました！！
２回目の回答に上乗せしてポイントを振らせていただきました。
どうしてもこの処理がしたくて、そのためだけにJavaScriptに手を出したのですが、
やっぱりまだまだたくさん勉強することがありそうです。
いつか同じようなことで困っている人にアドバイスできるようになりたいと思います。
アドバイスくださった皆様、ありがとうございました。
panana
2005/08/18 02:02:03
100
95
sparituda
2
回答ありがとうございます。
document.write時にimgにnameで名前を付けるという方法もあるんですね。
URLも参考にさせていただきます。
ありがとうございます。
質問時に字数制限があったため書ききれなかったのですが、
開く画像のサイズが大きい時に限り、リサイズされるまでに画像を読み込み終わらないのか、
小さいウィンドウで表示されてしまうのです。
もう一度同じサムネイルをクリックするとちょうどリサイズされるのですが…。
「画像を完全に読み込み終わってからサイズを取得→リサイズ」という処理にはできないでしょうか？