Creazy!

WEBエンジニア・ヤガーのテック・ガジェットブログ

JavaScript 小技集

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で画像サイズと合ったポップアップウィンドウを開く

-JavaScript, 小技集

執筆者:


  1. 池中玄太 より:

    当初はLightBoxを使用していたのですが、「デスクトップにコピー出来ない」と言われ別ウィンドウで開くことにしました。
    おかげですごく助かりました。
    他のサイトでも使用させて頂こうと思います。
    ありがとうございました!

  2. yager より:

    >池中玄太さん
    > 当初はLightBoxを使用していたのですが、「デスクトップにコピー出来ない」と言われ別ウィンドウで開くことにしました。
    なるほど、そういうケースもあるのですね。
    (LightBoxは右クリック保存できないんでしたっけ?)
    お役に立てたようで、何よりです。

  3. 松岡聖 より:

    イメージ画像のポップアップをたくさん作ることになり、
    参考にさせて頂きたいと思っているのですが、
    一度画像を開いて、閉じると2度目が開かないのですが・・・
    ぜひとも参考にさせて頂きたいので、よろしくお願いします。

  4. yager より:

    >松岡聖さん
    お返事が遅れてスミマセン。
    2度目が開かないという現象はこちらでは確認できませんでした。
    もしかしたら環境の問題ですかねぇ。(当方Macです。)
    問題がおきたOS、ブラウザなどの環境を教えて頂けますか?
    それから差し支えなければ問題が画面のURLを教えていただけると何かわかるかもしれません。
    公開がはばかられる場合は yager[ at ]creazy[ dot ]net にメール下さい。

  5. 焼酎Rock より:

    IE7でサンプルが機能しません。

  6. yager より:

    >焼酎Rockさん
    IE7ですか・・・スミマセンが今環境がないので時間できたら調べてみます。
    多分onloadイベントハンドラーの挙動がブラウザによって違うんだと思いますけど。

  7. yager より:

    >松岡聖さん
    別件で修正版を作ってみました。
    もしかしたらこちらで解決するかもしれないのでよろしければどうぞ。
    http://creazy.net/2008/07/re2_openimagesizedwindow_js.html
    >焼酎Rockさん
    恐らく下記エントリーで書いた部分が問題だったと思われます。
    新しいバージョンを試して頂ければと思います。
    http://creazy.net/2008/07/re2_openimagesizedwindow_js.html

comment

メールアドレスが公開されることはありません。

関連記事

no image

AmazonのURLを短くするブックマークレット

今日、はてブ経由でこんな豆知識を仕入れました。 もともとAmazonの商品ページは、書籍であれば10けたのISBNコード、それ以外の製品もASINの10けた番号さえあればアクセス可能だ。 via: 3 …

第12回:引用(blockquote)をCSSと画像でそれらしく見せる方法

前回のTipsではブログで頻発する引用作業を簡単にするブックマークレットを紹介しました。 ブログを書く上で頻繁に行う引用の手順を簡単にしてくれるブックマークレットを作ってみようと思う。 via: 第1 …

WordPressでstyle.cssを更新したらwp_enqueue_styleでキャッシュクリアする

どうも、ヤガーです。 しばらくWEB技術ネタを投稿していませんが、頻繁に使うテクニックについてはちゃんとブログに残していこうと思います。 企業HPなどを制作する時に、長い間Wordpressが使われて …

Topsy API を使ってブログに「つぶやかれ数」を自由にレイアウトする

Twitterの普及にともなって、twitter.com からこのブログにきてくれる人が増えてきました。Twitterとの連携を強化すべく 見ているページをTwitterに投稿するBookmarkle …

Skypeチャットの隠しコマンド /htmlhistory とBookmarkletで簡単レポート作成術

プライベートと仕事の両方で Skype はかなり前から使っていますが、チャットの内容をどうにか別のファイルにエクスポートしたいと思いました。 Skypeチャットは設定で過去の履歴も保存・表示できるので …

スポンサードリンク

スポンサードリンク