Re: 第３回：JavaScriptで画像サイズと合ったポップアップウィンドウを開く
[JavaScript] 2008年04月07日 23:40
[追記：2008/07/04] 更に改良したスクリプトをつくりましたので下記エントリーの方を参照して下さい。
・Re2: 第３回：JavaScriptで画像サイズと合ったポップアップウィンドウを開く
---
かなり前に書いたスクリプトなんですが、最近コメント欄での質問が多く寄せられています。
・第３回：JavaScriptで画像サイズと合ったポップアップウィンドウを開く
んで、久しぶりにコード見てみたら改良できそうな部分があるのでサクッと紹介します。
※このスクリプトの目的とかは上記エントリーを参考にして下さい。
サンプルソース
JavaScript関数/**
* 画像サイズと合ったポップアップウィンドウを開く関数
* @param src string ポップアップ表示する画像
*/
function openImageSizedWindow(src){
// 画像をプリロード
var i = new Image(); i.src = src;
// ロード完了してから処理を開始
i.onload = function() {
// 画像のサイズに合った空ウィンドウを開く
var pop_win = window.open(
"",
"_blank",
"width="+i.width+",height="+i.height+",scrollbars=no,resizable=yes"
);
// 空ウィンドウに画像を出力するためのHTML
pop_win.window.document.open();
pop_win.window.document.write(
'<html>'
+'<head><title>'+i.alt+'</title></head>'
+'<body style="margin:0;padding:0;border:0;">'
+'<img src="'+i.src+'" width="100%" alt="" />'
+'</body>'
+'</html>'
);
pop_win.window.document.close();
}
}
HTMLからの呼び出し例
<a href="javascript:openImageSizedWindow('画像のURL');">
<img src="画像のURL" alt="画像のタイトル" /></a>
前回からの変更点でポイントとなるのは、new Image(); i.src = src; でプリロードした後に、ちゃんと画像がロードされてから処理が始まるように i.onload イベントハンドラーをかませた事です。ブラウザによっては、画像がロードされない内に画像サイズを取得しようとして小さいサイズのウィンドウが開いてしまっていましたが、その点を解決しているはずです。
サンプル
;)
ダウンロード
すぐに使えるように外部JS形式で保存しました。
ZIPファイルを回答するとJSファイルが入っていますので、ダウンロードしてご利用ください。
・openImageSizedWindow.zip
<script type="text/javascript" src="/path/to/js/openImageSizedWindow.js" charset="UTF-8"></script>
まとめ
LightBox系のスクリプトなんかが一般化している昨今でも、こういったスクリプトの需要があるもんなんですね。別ウィンドウ表示は結構扱いにくかったりするんだけどね・・・。
これからも、「こんな関数があったら良いな」っていうのを作っていけたら良いなと思います。
---
[追記：2008/07/04] 更に改良したスクリプトをつくりましたので下記エントリーの方を参照して下さい。
・Re2: 第３回：JavaScriptで画像サイズと合ったポップアップウィンドウを開く
関連エントリー
・第３回：JavaScriptで画像サイズと合ったポップアップウィンドウを開く
・Re2: 第３回：JavaScriptで画像サイズと合ったポップアップウィンドウを開く
コメント
当初はLightBoxを使用していたのですが、「デスクトップにコピー出来ない」と言われ別ウィンドウで開くことにしました。
おかげですごく助かりました。
他のサイトでも使用させて頂こうと思います。
ありがとうございました！
投稿者: 池中玄太 | 2008年04月09日 01:41
＞池中玄太さん
> 当初はLightBoxを使用していたのですが、「デスクトップにコピー出来ない」と言われ別ウィンドウで開くことにしました。
なるほど、そういうケースもあるのですね。
（LightBoxは右クリック保存できないんでしたっけ？）
お役に立てたようで、何よりです。
投稿者: yager | 2008年04月09日 10:37
イメージ画像のポップアップをたくさん作ることになり、
参考にさせて頂きたいと思っているのですが、
一度画像を開いて、閉じると２度目が開かないのですが・・・
ぜひとも参考にさせて頂きたいので、よろしくお願いします。
投稿者: 松岡聖 | 2008年05月17日 21:21
＞松岡聖さん
お返事が遅れてスミマセン。
２度目が開かないという現象はこちらでは確認できませんでした。
もしかしたら環境の問題ですかねぇ。（当方Macです。）
問題がおきたOS、ブラウザなどの環境を教えて頂けますか？
それから差し支えなければ問題が画面のURLを教えていただけると何かわかるかもしれません。
公開がはばかられる場合は yager[ at ]creazy[ dot ]net にメール下さい。
投稿者: yager | 2008年05月25日 22:28
IE7でサンプルが機能しません。
投稿者: 焼酎Rock | 2008年06月13日 20:25
＞焼酎Rockさん
IE7ですか・・・スミマセンが今環境がないので時間できたら調べてみます。
多分onloadイベントハンドラーの挙動がブラウザによって違うんだと思いますけど。
投稿者: yager | 2008年06月15日 22:14
＞松岡聖さん
別件で修正版を作ってみました。
もしかしたらこちらで解決するかもしれないのでよろしければどうぞ。
http://creazy.net/2008/07/re2_openimagesizedwindow_js.html
＞焼酎Rockさん
恐らく下記エントリーで書いた部分が問題だったと思われます。
新しいバージョンを試して頂ければと思います。
http://creazy.net/2008/07/re2_openimagesizedwindow_js.html
投稿者: yager | 2008年07月04日 10:53