自家製LightBox作成

サイト構築 CSS2.1 HTML javascript

一応下記サイトを少し参考にさせていただきまして、自作しました。
まだスタイルは整っていないのでちょっと恥ずかしいですが、一応成果として載せないと土日に何をしていたんだって話になってしまうので＾＾；

参考にさせていただきましたサイト

http://ascii.jp/elem/000/000/477/477758/index-3.html

現在の状態

http://free-name-cardz.com/

html＆javascriptのjquery部分

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="css/common.css"  />
<link type="text/css" rel="stylesheet" href="css/list_content.css"  />
<link type="text/css" rel="stylesheet" href="css/modalbox.css"  />
<script type="text/javascript" src="js/jquiry.js"></script>
<link type="text/javascript" rel="javascript" href="js/common.js" />
<script type="text/javascript">
$(function(){ 
  $("body").append("<div id='glayLayer'></div><div id='overLayer'></div>");
  $("#glayLayer").click(function(){
    $(this).hide();
    $("#overLayer").html("");
    $("#overLayer").hide();
  });

  $(".detail_btn").click(function(){
    var obj = $(this).parent().find("div");
    viewModal(obj,$(this).attr("title"));
  });

  $(".list_img").click(function(){
		var obj = $(this).parent().find("div");
    viewModal(obj,$(this).attr("title"));
  });

  function viewModal(obj,param){
    $("#glayLayer").show();
    var category = obj.html();
    var material = obj.nextAll().html();
    var design = obj.nextAll().nextAll().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>";
		
    $("#overLayer").append(tag);

    $("#overLayer").show().css({
        marginTop:"-"+$("#overLayer").height()/2+"px" , 
        marginLeft:"-"+$("#overLayer").width()/2+"px"
    });
    return false;
  }
});
</script>


<title>無料名刺デザインのFreeNameCardz | しっぱ</title>
</head>
<body>
  <div id="container">
    <div id="header">
      <h1><a href="#">FreeNameCardz | しっぱ</a></h1>
    	<div id="h_wrap1">
        <!--<h1><a href="#">FreeNameCardz | しっぱ</a></h1>-->
        <embed src="swf/eyecatch2.swf" loop="false" quality="high" bgcolor="#000" type="application/x-shockwave-flash" width="960" height="255">
      </div>
      <div id="h_wrap2">
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">お問い合わせ</a></li>
          <li><a href="#">ご自分で印刷する場合</a></li>
        </ul>
      </div>
    </div>
    <div id="wrapper">
      <div id="content">
      	<div id="info">
        	<h2 id="info_title"><em>お知らせ</em></h2>
          <dt>
          	<dl>2012.06.30</dl><dd>新規オープン</dd>
          </dt>
        </div>
        <div id="main">
        	<h2 id="new_title"><em>新着</em></h2>
        	<div class="list_row">
            <div class="item_list">
            	<img src="details/images/No1.PNG" width="168px" height="105px" alt="シンプルな名刺" title="No01" class="list_img"/>
              <div class="item_category">カテゴリ：Pretty</div>
              <div class="item_category">素材提供：しっぱ</div>
              <div class="item_category">Designed By：しっぱ</div>
              <img src="images/detail_btn.png" alt="詳細を見る" title="No01" class="detail_btn"/>
            </div>
            <div class="item_list">
            	<img src="details/images/No02.PNG" width="168px" height="105px" alt="シンプルな名刺" title="No02" class="list_img"/>
              <div class="item_category">カテゴリ：Simple</div>
              <div class="item_category">Designed By：しっぱ</div>
              <img src="images/detail_btn.png" alt="詳細を見る" title="詳細を見る" class="detail_btn"/>
            </div>
            <div class="item_list">
            	<img src="details/images/No03.PNG" width="168px" height="105px" alt="シンプルな名刺" title="No03" class="list_img"/>
              <div class="item_category">カテゴリ：Simple</div>
              <div class="item_category">Designed By：しっぱ</div>
              <img src="images/detail_btn.png" alt="詳細を見る" title="No03" class="detail_btn"/>
            </div>
          </div>
        	<div class="list_row">
            <div class="item_list"></div>
            <div class="item_list"></div>
            <div class="item_list"></div>
          </div>
        	<div class="list_row">
            <div class="item_list"></div>
            <div class="item_list"></div>
            <div class="item_list"></div>
          </div>
        </div>
      </div>
      <div id="sidemenu">
      	<h2><em>名刺を探す</em></h2>
      	<ul>
        	<li id="l1"><a href="#"><em>シンプルな名刺</em></a></li>
	        <li id="l2"><a href="#"><em>かっこいい名刺</em></a></li>
        	<li id="l3"><a href="#"><em>かわいい名刺</em></a></li>
        	<li id="l4"><a href="#"><em>写真名刺</em></a></li>
        </ul>
      </div>
    </div>
    <div id="footer">
      <address>お問い合わせ<a href="mailto:dog.chipperke@gmail.com">schip-しっぱ-</a>.</address>
      <p><small>(c) copyright 2012 schip-しっぱ-</small></p>
    </div>
  </div>
</body>
</html>

lightbox用css

/* CSS Document */

#glayLayer{
    display:none;
    position:fixed;
    left:0;
    top:0;
    height:100%;
    width:100%;
    background:#7BAEB5;
    filter:alpha(opacity=75);
    opacity: 0.75;
}
* html #glayLayer{
    position:absolute;
}
#overLayer{
    display:none;
    width:400px;
    background:white;
    padding:10px;
    position: fixed;
    top:50%;
    left:50%;
}
* html #overLayer{
    position: absolute;
}

ポイント

LightBox用のcssを外だしすることで、再利用を考えた。
LightBoxは概念さえ抑えれば作れる！
次のコラムでで少し解説します。