第３回：JavaScriptで画像サイズと合ったポップアップウィンドウを開く
» tips
» 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をつけてみる
ヤガー (yager)
はじめまして！
mattと申します。
まさにこのスクリプトを探しているとたどり着きました。
現在、ロリポブログを利用しているのですが、
ロリポブログの仕様でサムネイル画像をクリックしてもウィンドウのサイズが画像に合ったサイズではありません。
そこで、このブログからスクリプトをダウンロードさせていただいて、このスクリプトと画像ファイルをブログとは別のレンタルサーバーにアップロードして、
ブログのヘッダーには
(****は私のレンタルサーバーのURL)
を記述し、ブログのエントリーには
と記述しました。
実際に画像がうまくポップアップしてくれるか確認してみたところ、
「ページでエラーが発生しました」
と下の方に出て、ポップアップしません。
ブラウザはIE7です。
ちょっと行き詰っておりますので、アドバイスをいただけませんでしょうか？