第３回：JavaScriptで画像サイズと合ったポップアップウィンドウを開く
[JavaScript] 2006年12月27日 22:08
[追記：2008/07/04] 更に改良したスクリプトをつくりましたので下記エントリーの方を参照して下さい。
・Re2: 第３回：JavaScriptで画像サイズと合ったポップアップウィンドウを開く
---
[追記：2008/04/07] 改良したスクリプトをつくりましたので下記エントリーの方を参照して下さい。
・Re: 第３回：JavaScriptで画像サイズと合ったポップアップウィンドウを開く
---
今回はフォトサイトで特に多様されると思われる画像のポップアップウィンドウを開く機能について、便利な関数を作ってみようと思います。
フォトサイトでは一覧ページではサムネイル（小さい画像）を表示して、クリックすると大きな画像（オリジナルサイズ）を表示するという形式を取る事が多いと思います。（ブログだとほとんどですね。）その時に画像サイズを確認してから window.open() して、ポップアップ用のページを用意して・・・をいちいちやっていたら面倒なので、その辺を解消するのが目的です。
■まずは基本的な事
普通にサムネイル表示→ポップアップ表示をやろうとするとこんな構成になると思います。・親HTML -- サムネイル画像 ↓ JavaScriptでポップアップHTML呼び出し ↓ ・ポップアップHTML -- オリジナル画像やりたい事はこれだけなのにHTML2枚、画像2枚、JS関数１個を遣っている訳です。 特にポップアップの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
pop_win.window.document.open(); pop_win.window.document.close();２）ポップアップウィンドウ内のスタイルでタイポ修正
pading -> paddingイージーミス申し訳ない！ --- （2008/04/07追記） 改良したスクリプトをつくりましたので下記エントリーの方を参照して下さい。 ・Re: 第３回：JavaScriptで画像サイズと合ったポップアップウィンドウを開く --- （2008/07/04追記） 更に改良したスクリプトをつくりましたので下記エントリーの方を参照して下さい。 ・Re2: 第３回：JavaScriptで画像サイズと合ったポップアップウィンドウを開く
関連エントリー
・第13回：URLエンコードとURLデコードを簡単にするブックマークレット
・第12回：引用（blockquote）をCSSと画像でそれらしく見せる方法
・第11回：引用（blockquote）を簡単にするブックマークレット
・第10回：Windowsフォントをアンチエイリアスでキレイに見せる方法
・第９回：閲覧しているサイトへのリンクタグを生成するブックマークレット
・第８回：Twitter JavaScript Badges の日付フォーマットを自由にカスタマイズ
・第７回：サムネイル作成APIをJavaScriptで簡単に切り替える方法
・第６回：TinyURL の遷移先が怖くて開けない場合の対処法
・第５回：twitter の JavaScript Badge を改造する
・第４回：twitter の JavaScript Badge をIEで表示するとおかしい件に対応してみる
・第３回：JavaScriptで画像サイズと合ったポップアップウィンドウを開く
・第２回：タグに関わる基本的な事
・第１回：CSSで画像にborderをつけてみる
コメント
はじめまして！
mattと申します。
まさにこのスクリプトを探しているとたどり着きました。
現在、ロリポブログを利用しているのですが、
ロリポブログの仕様でサムネイル画像をクリックしてもウィンドウのサイズが画像に合ったサイズではありません。
そこで、このブログからスクリプトをダウンロードさせていただいて、このスクリプトと画像ファイルをブログとは別のレンタルサーバーにアップロードして、
ブログのヘッダーには
(****は私のレンタルサーバーのURL)
を記述し、ブログのエントリーには
と記述しました。
実際に画像がうまくポップアップしてくれるか確認してみたところ、
「ページでエラーが発生しました」
と下の方に出て、ポップアップしません。
ブラウザはIE7です。
ちょっと行き詰っておりますので、アドバイスをいただけませんでしょうか？
投稿者: matt | 2008年04月02日 20:59
タグをコメントに記載していたのですが、投稿すると消えてしまいました。
申し訳ありません。
要はヘッダーにはJavascriptの外部ファイルを呼び出すタグを記入し、ブログのエントリーにも「関数呼び出しのサンプル」通りに記述したのですが、うまくいきません。
ご教授のほど、よろしくお願いします。
投稿者: matt | 2008年04月02日 21:03
＞mattさん
ご利用ありがとうございます。
コメント欄ではスタイル用以外のタグは除去されます
が、管理画面ではみれますので確認しました。
タグの貼り方は特に問題無いようには見えますが実際の画面を見てみない事には何とも言えません。
エラーの出る画面のURLを教えてくれませんか？
コメント欄に書くのがはばかられるようでしたから下記メアドまでお願いします。
yager [ at ] creazy.net
※[ at ]を@に読み替えて下さい。
投稿者: yager | 2008年04月03日 00:36
初めまして！
非常に便利なスクリプトを有り難うございます。
今まで、いちいちリンク毎にウィンドウサイズを指定する作業から開放されました！
実はクライアントから、画像をクリックしたら余白の無いウィンドウを開いて欲しいと言われ、本を片手にJavascriptで制作していたのですが、Macでは正常なのにWinではエラーが起きていて困っていました。
このスクリプトのサンプルがWinでもMacでも問題なく動作していたので導入したいのですが、なぜかボクの環境では上手くスクリプトが動かず困っています。
見れるは見れるのですが、クリックした時にウィンドウサイズがすごく小さい状態で開いてしまいます。
それを閉じてもう一度クリックするとちゃんと画像にぴったりのウィンドウサイズが開きます。
Winでも同じ状況になっています。
それと、Javascriptを外部にするとFireFoxのFirebugでチェックするとシンタックスエラー？が出て上手く動作しませんでした。
なので、今はページに埋め込んでいます。
上記のサイトをこちらに明記させて頂きますので、ご回答頂ければとコメント致しました。
www.pipeline-inc.jp/studio/heiwazima/index.html
お手数だとは思いますが非常に使い勝手の良いスクリプトだと思いますのでよろしくお願い致します。
投稿者: 池中玄太 | 2008年04月07日 18:24
＞池中玄太さん
初めまして。コメントありがとうございます。
> クリックした時にウィンドウサイズがすごく小さい状態で開いてしまいます。
どうやら、画像のロードが終わらないうちに画像サイズを取得しようとして最小ウィンドウで開くようになってしまう場合があるようですね。池中玄太さんの環境で直るか分かりませんが改良版を書いて見ましたので下記エントリ−を参考にしてみて下さい。
http://creazy.net/2008/04/re_openimagesizedwindow_js.html
> Javascriptを外部にするとFireFoxのFirebugでチェックするとシンタックスエラー？
Firebugでデバッグしているならどの処理で止まっているか分かりませんか？
URL拝見しましたが、文字エンコーディングがShift-JISのようなので、こちらで配布しているUTF-8の外部JSと文字コードがバッティングしています。文字化けが原因で外部JSが正常に読み込まれていないのではないでしょうか？scriptタグにcharset="UTF-8"と指定すると上手く行きそうです。
いかがでしょうか？
投稿者: yager | 2008年04月08日 00:13
さっそくのご回答ありがとうございます(>
今日は外出先なので家に戻ったら早速試してご報告いたします！
外部スクリプトは文字コードの設定のせいだったのですね(^ ^;)
それと、FireBugでのエラー箇所は
"pop_win.window.document.write(¥n"
となっていたので？？？だったのですが、文字コードが違っていたので改行コードがうまく変換できてなかったのかなと、頂いたコメントで気づきました。
yagerさんにリスペクとです！ありがとうございました！
投稿者: 池中弦太 | 2008年04月08日 10:37
無事うまく動きました！
ものすごく感謝しています！
本当にありがとうございました！
他のスクリプトもじっくり拝見させて頂きます(^ ^)
投稿者: 池中玄太 | 2008年04月09日 01:43