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

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

今回はフォトサイトで特に多様されると思われる画像のポップアップウィンドウを開く機能について、便利な関数を作ってみようと思います。

フォトサイトでは一覧ページではサムネイル(小さい画像)を表示して、クリックすると大きな画像(オリジナルサイズ)を表示するという形式を取る事が多いと思います。(ブログだとほとんどですね。)その時に画像サイズを確認してから window.open() して、ポップアップ用のページを用意して・・・をいちいちやっていたら面倒なので、その辺を解消するのが目的です。

■まずは基本的な事

普通にサムネイル表示→ポップアップ表示をやろうとするとこんな構成になると思います。
・親HTML -- サムネイル画像
   ↓
   JavaScriptでポップアップHTML呼び出し
   ↓
・ポップアップHTML -- オリジナル画像
やりたい事はこれだけなのにHTML2枚、画像2枚、JS関数1個を遣っている訳です。 特にポップアップのHTMLが非常に無駄、というか面倒くさいのでそれをJS関数で出力する。

■完成後の構成

・親HTML -- サムネイル画像
   ↓
   JavaScriptでポップアップHTML呼び出し  -- オリジナル画像
それでは、早速関数を作ってみます。

サンプルコード

/**
 * 画像サイズと合ったポップアップウィンドウを開く関数
 * @param src string ポップアップ表示する画像
 */
function openImageSizedWindow(src){
    // 画像をロードしてサイズを取得
    var i = new Image(); i.src = src;
    // 画像のサイズに合った空ウィンドウを開く
    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();
}

<-- 関数呼び出しのサンプル -->
<a href="javascript:openImageSizedWindow('画像のURL');">
<img src="画像のURL" alt="画像のタイトル" /></a>

実行例

写真のタイトル

ダウンロード

外部JSの形式で関数を保存しました。ダウンロードしてそのまま利用できます。
openImageSizedWindow.zip

--- (2007/08/25追記) スクリプトに2点間違いがありましたので修正しました。 1)ポップアップウィンドウ内にHTML出力している部分(document.write)の前後に以下コードを追加しました。明示的な停止処理が無かったため、FireFoxでポップアップ画面のロードが終わらない状況だった事への対応です。
pop_win.window.document.open();
pop_win.window.document.close();
2)ポップアップウィンドウ内のスタイルでタイポ修正
pading  ->  padding
イージーミス申し訳ない! --- (2008/04/07追記) 改良したスクリプトをつくりましたので下記エントリーの方を参照して下さい。 ・Re: 第3回:JavaScriptで画像サイズと合ったポップアップウィンドウを開く --- (2008/07/04追記) 更に改良したスクリプトをつくりましたので下記エントリーの方を参照して下さい。 ・Re2: 第3回:JavaScriptで画像サイズと合ったポップアップウィンドウを開く

第13回:URLエンコードとURLデコードを簡単にするブックマークレット
第12回:引用(blockquote)をCSSと画像でそれらしく見せる方法
第11回:引用(blockquote)を簡単にするブックマークレット
第10回:Windowsフォントをアンチエイリアスでキレイに見せる方法
第9回:閲覧しているサイトへのリンクタグを生成するブックマークレット
第8回:Twitter JavaScript Badges の日付フォーマットを自由にカスタマイズ
第7回:サムネイル作成APIをJavaScriptで簡単に切り替える方法
第6回:TinyURL の遷移先が怖くて開けない場合の対処法
第5回:twitter の JavaScript Badge を改造する
第4回:twitter の JavaScript Badge をIEで表示するとおかしい件に対応してみる
・第3回:JavaScriptで画像サイズと合ったポップアップウィンドウを開く
第2回:タグに関わる基本的な事
第1回:CSSで画像にborderをつけてみる

同じカテゴリーの記事

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