人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

JavaScriptでサムネイルをクリック→元画像を別窓で表示させたいと思います。

画像と同じサイズの窓を開きたいのですが、画像サイズが不定なので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();

}

アドバイスをよろしくお願いします。

●質問者: panana
●カテゴリ:ウェブ制作
✍キーワード:HTML JavaScript open SCRIPT SRC
○ 状態 :終了
└ 回答数 : 6/6件

▽最新の回答へ

1 ● m035
●20ポイント

http://www.geocities.jp/ram0kb/js/maetaImg.html

参考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);

}

◎質問者からの返答

回答ありがとうございます。

document.write時にimgにnameで名前を付けるという方法もあるんですね。

URLも参考にさせていただきます。

ありがとうございます。

質問時に字数制限があったため書ききれなかったのですが、

開く画像のサイズが大きい時に限り、リサイズされるまでに画像を読み込み終わらないのか、

小さいウィンドウで表示されてしまうのです。

もう一度同じサムネイルをクリックするとちょうどリサイズされるのですが…。

「画像を完全に読み込み終わってからサイズを取得→リサイズ」という処理にはできないでしょうか?


2 ● sparituda
●20ポイント

resizeTo()は、ウィンドウの外側のサイズを設定します。

ウィンドウの内側のサイズを設定するには、ブラウザによって処理を振り分ける必要があります。

NetscapeやFireFoxの場合は、対象のウィンドウオブジェクトのinnerWidthとinnerHeightに、サイズを代入すれば良い様です。

IEの場合、値が設定できる同様のプロパティが見当たらなかったのですが、document.body.clientWidth/clientHeightで内側のサイズが取得できますので、一度、resizeTo()で外側のサイズを設定してから、内側のサイズとの差を求めてresizeBy()で大きさを変えるという方法があります。IEで事前にウィンドウの外側のサイズを知る方法があればresizeTo()一回だけでできますが、それらしいプロパティを見つけられませんでした。なお、document.body.clientWidth/clientHeightは、document.close()の前に参照する必要がある様です。

Safariでは、どうも上手く行きませんでした。すみません。

◎質問者からの返答

回答ありがとうございます。

こちらも字数制限によりやむなく説明を端折ってしまったのですが、

とりあえず、ブラウザごとの微調整はしています。

「画像が完全に読み込めたら」という処理を書く方法はないでしょうか…?


3 ● sparituda
●70ポイント

2件目の回答です。ポイントは2件合算で割り振って頂ければ結構です。


画像読み込みの完了を調べるには、Imageオブジェクトのcompleteプロパティを使います。読み込みが完了しているとTRUEになります。

ただし、ブラウザに依存する様で、Safariではundefinedとなってしまい、使えません。先ほどのサイズ設定が、Safariで上手く行かないのも、Imageオブジェクトからサイズが取得できないことが原因の様です。

◎質問者からの返答

2回目の回答ありがとうございます。

「Imageオブジェクトのcomplete」これをどこでどのタイミングでどう書けばよいのかを教えていただきたかったです…。

もしよろしかったらいわしででも、と思ったんですがウェブマスターはてなはいわし、使えないんでしょうか…。


4 ● yoo15x
●20ポイント

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から呼び出す時はでよいのでしょうか?

質問ばかりでごめんなさい…。


5 ● m035
●10ポイント

外部JSは

<head>

<script type=”text/javascript” src=”ファイルのURL”></script>

</head>

で呼び出します。

◎質問者からの返答

あああ〜ごめんなさい。

どう伝えたらよいのでしょう…。

HTML内でfunctionを呼び出すときって言うんでしょうか。

「外部JSを」でなくて「外部JSから」というか…。

先ほど書いた

というのは

という意味でした。


1-5件表示/6件
4.前の5件|次5件6.
関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ