Re: 第3回:JavaScriptで画像サイズと合ったポップアップウィンドウを開く

[追記:2008/07/04] 更に改良したスクリプトをつくりましたので下記エントリーの方を参照して下さい。
Re2: 第3回:JavaScriptで画像サイズと合ったポップアップウィンドウを開く
---
かなり前に書いたスクリプトなんですが、最近コメント欄での質問が多く寄せられています。

第3回: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サンプル

ダウンロード

すぐに使えるように外部JS形式で保存しました。
ZIPファイルを回答するとJSファイルが入っていますので、ダウンロードしてご利用ください。
openImageSizedWindow.zip

スクリプトはUTF-8で保存されていますので、そのまま使う場合はscriptタグにcharsetを指定する事をお勧めします。
<script type="text/javascript" src="/path/to/js/openImageSizedWindow.js" charset="UTF-8"></script>

まとめ

LightBox系のスクリプトなんかが一般化している昨今でも、こういったスクリプトの需要があるもんなんですね。別ウィンドウ表示は結構扱いにくかったりするんだけどね・・・。

これからも、「こんな関数があったら良いな」っていうのを作っていけたら良いなと思います。

---
[追記:2008/07/04] 更に改良したスクリプトをつくりましたので下記エントリーの方を参照して下さい。
Re2: 第3回:JavaScriptで画像サイズと合ったポップアップウィンドウを開く

第3回:JavaScriptで画像サイズと合ったポップアップウィンドウを開く
Re2: 第3回:JavaScriptで画像サイズと合ったポップアップウィンドウを開く

同じカテゴリーの記事

このページの一番上に戻る
  • Facebook
  • Twitter
  • Tumblr
  • Instagram
  • miil