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();

}

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

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2005/08/16 18:59:23
  • 終了:--

回答(6件)

id:m035 No.1

m035回答回数19ベストアンサー獲得回数02005/08/16 20:31:15

ポイント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);

}

id:panana

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

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

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

ありがとうございます。

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

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

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

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

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

2005/08/16 22:18:26
id:sparituda No.2

sparituda回答回数57ベストアンサー獲得回数02005/08/16 20:35:47

ポイント20pt

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

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

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

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

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

id:panana

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

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

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

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

2005/08/16 22:25:29
id:sparituda No.3

sparituda回答回数57ベストアンサー獲得回数02005/08/16 22:54:13

ポイント70pt

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


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

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

id:panana

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

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

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

2005/08/16 23:19:47
id:yoo15x No.4

yoo15x回答回数150ベストアンサー獲得回数12005/08/16 23:00:19

ポイント20pt

どうも、画像の読み込みとリサイズのタイミングが合わないのが気持ちよくなかったので

違うアプローチをしていました。 いったん閉じて開くというものです。

検証は 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--

id:panana

回答ありがとうございます。そうなんです…。

「小窓が開いていたら一回閉じて、新しく開きなおす」というのも考えたんですが、

その「小窓が開いていたら」が書けませんでした…。

>ただタイマーだけは苦手でして、この先へ進めません。すみません。

いえいえ。この先も何も私、どこまで進んでるのかもわかりません…。

参考URLと書いていただいたJSをよく読み解いて勉強します。

ありがとうございました。

※ ところでこのようにfunction部分から飛び出してる宣言がある場合、

外部JSから呼び出す時はでよいのでしょうか?

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

2005/08/16 23:38:11
id:m035 No.5

m035回答回数19ベストアンサー獲得回数02005/08/17 01:13:05

ポイント10pt

外部JSは

<head>

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

</head>

で呼び出します。

id:panana

あああ〜ごめんなさい。

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

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

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

先ほど書いた

というのは

という意味でした。

2005/08/17 01:45:14
id:yoo15x No.6

yoo15x回答回数150ベストアンサー獲得回数12005/08/17 23:21:07

ポイント50pt

前回の「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);

}

id:panana

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

見本ソースまで作っていただきありがとうございました!

ステータスバーに「読み込み中」などのメッセージが出るのが安心でいいですね!

おまけも素敵です^^

使ったことのないメソッドがたくさんあって、

どんな処理をしているのか想像程度にしかわからないのですが、

しっかり勉強してぜひ組み込んでみようと思います。ありがとうございました。

--------

sparitudaさん、トラックバックでの回答、ありがとうございました!!

2回目の回答に上乗せしてポイントを振らせていただきました。

どうしてもこの処理がしたくて、そのためだけにJavaScriptに手を出したのですが、

やっぱりまだまだたくさん勉強することがありそうです。

いつか同じようなことで困っている人にアドバイスできるようになりたいと思います。

アドバイスくださった皆様、ありがとうございました。

2005/08/18 01:55:32
  • id:panana
    ありがとうございました!

    var objWin;
    var timerID;

    function fitimg() {
    myImage = objWin.document.getElementById(’myImage’);

    if (myImage.complete==undefined || myImage.complete) {
    clearInterval(timerID);

    w=myImage.width;
    h=myImage.height;

    objWin.resizeTo(w+10,h+36);
    objWin.document.close();
    }
    }

    function popup(url){
    var path=url;
    var title=path.substring(path.lastIndexOf(’/’,path.length)+1,path.length);
    var title=title.substring(title.lastIndexOf(’.’,title.length),-title.length);

    objWin=window.open(””,”myWindow”,”width=320,height=240”);

    objWin.document.open();
    objWin.document.write(”<html><head><title>”+title+”</title></head>”);
    objWin.document.write(”<body style=’margin:0; padding:0;’>”);
    objWin.document.write(”<img src=’”+url+”’ id=’myImage’>”);
    objWin.document.write(”</body></html>”);
    objWin.focus();
    timerID=setInterval(’fitimg()’, 100);
    }

    暫定的ですが、このような形になりました。

    新窓のタイトル部分に開いた画像のファイル名が出るようにしてあります。
    で、開いた窓を前面に持ってきました。

    ブラウザの振り分けの部分は、当面の訪問者がIE6〜とOpera7〜なので、
    ちょっと力技に出ました。--;

    FireFoxとNN7.xではツライので様子を見て対応していこうと思います。
    あとはこれでステータスバーに状況を表示できるようにすれば完成です!

    皆様本当にありがとうございました。
  • id:sparituda
    祝!問題解決

    みんなの知恵?を集めて、なんとか問題解決した様で、良かったです。
    ダイアリーからのトラックバックで、無理矢理3回目の回答を伝えてみました。その分を考慮したポイント、ありがとうございます。
    3回目を伝えるためにダイアリーを新規開設し、一旦記事を書き込んでから、いろいろと手直ししたので、トラックバックが二重になったりして、おかしくなってますね。質問者の方でも、不要なトラックバックは消せないのかな?

    暫定版Script、拝見しました。
    画像読込み完了の判断の辺りは、私のサンプルを採用して頂いた様ですね。その部分をちょっと解説。
    timerID=setInterval(fitimg(), 100)で、fitimg()を100ミリ秒ごとに繰り返し起動し、その処理の中で、画像読込み完了が判断できたら、clearInterval(timerID)で、繰り返し起動を停止します。
    画像読込み完了の判断は、Imageオブジェクトのcompleteプロパティで判断しますが、Safariなど一部のブラウザは対応していない様なので、undefinedの場合も読込み完了とみなしています。読込み失敗のケースに対応できる様に、fitimg()が起動した回数を数える変数を用意して、おる程度の回数になったら、リサイズせずに終了する様にした方が良いでしょう。

    Windowサイズの件は、ブラウザに依存する部分が多い様で、大変ですね。
    FirefoxとNetscape(7.x)では、WindowオブジェクトのinnerWidthとinnerHeightで、ウィンドウの内側のサイズを設定できますが、画像のサイズと近くなると、スクロールバーが勝手に出てきてしまうので、少し大きめに設定する必要があります。Safariはどうも上手く行かないので、pananaさんのやり方と同様に、画像サイズ+別途調べた枠の幅の固定値、でリサイズするのが良さそうです。

    追加機能として、スクリーンサイズより大きな画像の場合は、縮小して表示する様にすれば、完璧ですね。
    http://d.hatena.ne.jp/sparituda/20050816
  • id:panana
    Re:祝!問題解決

    この回答のためにダイアリーを開設して下さったのですか!本当に頭が下がります。

    今回解説していただいたタイマーの記述方法がよくわかっておりませんでした。
    なのでできるだけいじらないようにそのまま使わせていただいてます。
    説明を読むと「なるほど!」と思うのですが、まだまだ自分では書けません(--;

    ある関数から別の関数を呼び出す仕組み(?)もよくわかってません。
    ですがこれは数をこなしてなれるしかないと思ってます。

    単純なScriptをいろいろ書いていじってモノにしていきたいと思います。

    ありがとうございました。

    > 追加機能として、スクリーンサイズより大きな画像の場合は、縮小して表示する様にすれば、完璧ですね。
    うっ…。

この質問への反応(ブックマークコメント)

トラックバック

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません