自家製LightBox作成のポイント解説

LightBoxとは

授業でもありましたが、そもそもはしたからライトアップして展示するボックスのこと。
Webではブラウザ表示の一番上に表示して写真などを見せる手法

LightBoxをよく見てみる

• 下の画面は切り替わっていない。
• 半透明の背景の上にさらに表示部が乗っている

ここから考えるとLightBoxが出ても画面遷移はしていないことがわかる！（HTTPリクエストって意味で。。。）

スクリプト解説！

//jqueryをはじめる合図
$(function(){ 
  //bodyタグ直下に「<div id='glayLayer'>」と「<div id='overLayer'>」という二つの空のブロック要素を作る
  //これが後々LightBox本体になって行きます。
  //glayLayerがLightBoxの背景、overLayerが本体です
  $("body").append("<div id='glayLayer'></div><div id='overLayer'></div>");

  //LightBoxの背景をクリックしたときの処理
  $("#glayLayer").click(function(){
    //「#glayLayer」のクリックイベントなのでここでの「this」は「#glayLayer」です
    //「#glayLayer」をクリックするとLightBoxの背景が非表示になります（細かく言うと違うのですが、概念的な意味で）
    $(this).hide();
    //LightBox本体に表示されていた内容をクリアします
    $("#overLayer").html("");
    //LightBox本体を非表示にします。
    $("#overLayer").hide();
  });

  //Top画面で「詳細を見る」ボタンを押したときの処理
  $(".detail_btn").click(function(){
    //兄弟要素からdivだけを取り出してviewModalという関数に引き継ぎます。
    var obj = $(this).parent().find("div");
    //viewModalという関数を呼び出します。（本体は「function viewModal(obj,param)」です）
    viewModal(obj,$(this).attr("title"));
  });

  //Top画面で名刺イメージをクリックしたときの処理
  //このときは「詳細を見る」をクリックしたときと同じことをします。
  $(".list_img").click(function(){
    var obj = $(this).parent().find("div");
    viewModal(obj,$(this).attr("title"));
  });

  //実際にLightBoxを表示する処理です。
  function viewModal(obj,param){
    //LightBoxの背景を表示します。
    $("#glayLayer").show();

   //引き継いだdivの集まりから兄弟要素を取り出します。
    var category = obj.html();
    var material = obj.nextAll().html();
    var design = obj.nextAll().nextAll().html();
    
   //必要な情報を組み合わせてLightBox用のHTMLを作ります。
    var tag="<div style='background-color:#ffffff;'><img src='details/images/No1.PNG' alt='' title='' /><div>"+category+"</div><div>"+material+"</div><div>"+design+"</div><div><a href='http://yokotani.net'>注文する</a></div></div>";

    //上で作ったタグをLightBox本体配下にくっつけます（appendがくっつけるというコマンドです）
    //これでLightBoxを表示する準備は完了です
    $("#overLayer").append(tag);

    //LightBox本体を表示します。計算についてはあとで書きます。
    $("#overLayer").show().css({
        marginTop:"-"+$("#overLayer").height()/2+"px" , 
        marginLeft:"-"+$("#overLayer").width()/2+"px"
    });

    //jQueryを使用した際はこのようにfalseを返すのが習慣です。
    return false;
  }
});