ポップアップで画像を拡大表示するjQuery

All you need is... By: Dar'ya Sip

画像をホップアップ表示する有名なjQueryのプラグインには「LightBox」があります。

LightBoxほど多機能ではありませんが、画像をポップアップ表示するため処理を実装してみたので紹介します。

ポップアップで画像を拡大表示する
  1. ポップアップのデモ
  2. HTML & CSSのソースコード
  3. jQueryのソースコード

ポップアップのデモ

※画像を画面サイズに対して拡縮する処理は実装していないため、画面サイズが小さい場合うまく動きません。

Brunch Menu By: Basheer Tome

Brunch Menu By: Basheer Tome

Twitter By: eldh

Twitter By: eldh

HTML & CSSのソースコード

HTMLでは、表示する画像と画像がクリックされたときにポップアップとして表示するするためのdivタグ「popup-background」とimgタグ「popup-item」を定義しておきます。

そしてjQuery側で利用するためポップアップ表示をさせる画像のリンクにclass「popupimg」を定義しておきます。

HTML
<!-- 画面に表示する画像 -->
<a href="画像のURL" class="popupimg">
      <img src="画像のURL" width="200px"  />
</a>
<!-- ポップアップ用の背景とimg -->
<div id="popup-background">
</div>
<img id="popup-item" src="" />

CSSでは、ポップアップ用の背景とimgタグの定義を作成しておきます。

CSS
#popup-background{
    position:fixed;     /* 位置の固定 */
    top: 0;             /* 表示位置 */
    left: 0;            /* 表示位置 */
    height: 100%;       /* 画面全体に表示 */
    width: 100%;        /* 画面全体に表示 */
    background:#000;    /* 背景色 */
    opacity: 0.60;      /* 透明度 */
    margin: 0;          /* 余白の削除 */
    padding: 0;         /* 余白の削除 */
    z-index:1000;       /* 要素のz座標 */
}
#popup-item{
    position:fixed;     /* 位置の固定 */
    top: 50%;           /* 表示位置(真ん中に表示) */
    left: 50%;          /* 表示位置(真ん中に表示) */
    margin: 0;          /* 余白の削除 */
    padding: 0;         /* 余白の削除 */
    z-index:1001;       /* 要素のz座標 */
}

これで、ポップアップ表示の前準備は完了です。

jQueryのソースコード

HTMLとCSSで前準備を行った後、ポップアップを表示するためjQueryを作成します。

jQuery
(function($){  // 無名関数($の競合を回避)
    // ポップアップ用のタグを消す
    $('#popup-background').hide();
    $('#popup-item').hide();
    
    // class「popupimg」のリンクがクリックされた時のイベント定義
    $('.popupimg').bind('click', function(e){
        // aタグでデフォルト動作を無効にする
        e.preventDefault(); 

        // 画像の読み込み
        var img = new Image();
        // クリックされたaタグのhrefを取得する
        var imgsrc = this.href;
        
        // Image()のロードイベントを定義する
        $(img).load(function(){
            $('#popup-item').attr('src', imgsrc);
            // ポップアップで表示するためのimgタグに画像が読み込まれているかチェックする
            $('#popup-item').each(function(){
                // 読み込み済みならばポップアップ表示用の関数を呼び出す
                if (this.complete) {
                    imgload(img);
                    return;
                }
            });
            // imgタグのロードイベントを定義
            $('#popup-item').bind('load', function(){
                // 画像がロードされたらポップアップ表示用の関数を呼び出す
                imgload(img);
            });
            
        });
        // Image()に画像を読み込ませる
        img.src = imgsrc;
    });
    
    // ポップアップされた領域のクリックイベント
    $('#popup-background, #popup-item').bind('click', function(){
        // ポップアップを消すため、タグをフェードアウトさせる
        $('#popup-background').fadeOut();
        $('#popup-item').fadeOut();
        
    });
    
    // ポップアップ表示用関数
    function imgload(imgsource){
        // ポップアップの背景部分を表示する
        $('#popup-background').fadeIn(function(){
            // 画像を中心に表示させるため、画像の半分のサイズを取得
            /* 
            * 画像を表示するimgタグ「popup-item」はCSSで画面の中心に
            * 表示するようにしているため、そのまま表示すると画像の左上の端が
            * 中心に来ます。
            * そのため、マイナスのマージンを画像の半分のサイズ設定します。
            */
            var item_hieght_margin = (imgsource.height / 2) * -1;
            var item_width_margin = (imgsource.width / 2) * -1;
            
            // 取得したマージンと画像のサイズをCSSで定義する
            var cssObj = {
                marginTop: item_hieght_margin
                , marginLeft: item_width_margin
                , width: imgsource.width
                , height: imgsource.height
            }
            // 画像の表示用タグにCSSを当て、表示を行う
            $('#popup-item').css(cssObj).fadeIn(100);
        });
    }
})(jQuery) 
利用したjQueryの関数 / javascriptプロパティ
イベントを設定する
$('セレクタ').bind('イベント1 イベント2', function(){
   // イベントの処理
});
「bind」以外にも「$(‘セレクタ’).click()」などでイベントが設定できるが、「bind」は複数のイベントをスペース区切りで指定が可能。
要素を消す(ハイド)
$('セレクタ').hide(ミリ秒);
hideにミリ秒を指定せず「hide()」とした場合は、アニメーション無しで指定したセレクタの要素を消す。
要素を消す・表示する(フェードアウト・フェードイン)
$('セレクタ').fadeOut(ミリ秒);
$('セレクタ').fadeIn(ミリ秒);

fadeOut/fadeInにミリ秒を指定せず「fadeOut()」「fadeIn()」とした場合は、400ミリ秒のアニメーションで指定したセレクタの要素を消す(表示する)。

fadeOutした要素はfadeInで表示させることができる。
デフォルトアクションをキャンセルする
e.preventDefault();

ブラウザのデフォルトアクションをキャンセルする。

デフォルトアクションとは、例えばリンク(aタグ)ならば、リンク先を開く。チェックボックスであればチェックのON・OFFの切り替えなど。
画像の読み込みを確認する
画像オブジェクト.complete
画像が読み込み済みならば「true」、未読み込みならば「false」が設定される
合致した全てのエレメントに対して関数を実行する
$('セレクタ').each(function(){
   // 関数の処理
});
指定したセレクタに一致する要素一つ一つを順に処理する
divider

Trackback URL

http://webnonotes.com/javascript-2/jquerypopup/trackback/

No Comments Yet

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>