読者です 読者をやめる 読者になる 読者になる

ウェブ学のすすめ

Study of Web Design & Programing

可変グリッドレイアウト〜jQueryを使ったデモサイト「no3design」

プレビュー


↓別ウィンドウを開いて見る
no3design

ポイント

jQuery Easing Plugin

加速・減速など動きに強弱のついたエフェクト(イージング処理)をつけられるjQueryプラグイン
jQuery Easing Plugin

jquery.vgrid.js

可変グリッドレイアウトjQueryプラグイン
可変グリッドレイアウトのjQueryプラグイン書いたよ | Xlune::Blog

↓基本

$(function(){  
    $("#gallery").vgrid();  
}); 

↓イージングの種類や時間も指定可

$(function(){  
    $("#gallery").vgrid({  
        easeing: "easeOutBounce",  
        time: 500,  
        delay: 50  
    });  
});  
Lightbox 2

Lightbox 2

コード

HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>no3design</title>
<link rel="stylesheet" href="style.css">
<link href="lightbox.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="lightbox.js"></script>
<script src="jquery.easing.1.3.js"></script>
<script src="jquery.vgrid.js"></script>
<script src="script.js"></script>
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<style>
	article, aside, dialog, figure, footer, header,
	hgroup, menu, nav, section { display: block; }
</style>
</head>
<body>
<div id="container">
  <div id="header"> 
    <h1><a href="#">no3<span class="deco">design</span></a></h1>
    <div id="nav">
      <ul>
        <li id="nav01"><a href="">home</a></li>
        <li id="nav02"><a href="">about</a></li>
        <li id="nav03" class="current"><a href="">gallery</a></li>
        <li id="nav04"><a href="#">contact</a></li>
      </ul>
  </div>
  <div id="wrapper">
  <div id="content">
          <h2 id="categoryTtl">gallery</h2>
            <ul id="gallery">
            <li><a href="http://webgaku.hotcom-web.com/images/no3design/01.png" rel="lightbox[group]"><img src="http://webgaku.hotcom-web.com/images/no3design/01s.jpg" alt="" width="160" height="240"></a></li>
            <li><a href="http://webgaku.hotcom-web.com/images/no3design/02.png" rel="lightbox[group]"><img src="http://webgaku.hotcom-web.com/images/no3design/02s.jpg" alt="" width="160" height="240"></a></li>
            <li><a href="http://webgaku.hotcom-web.com/images/no3design/03.jpg" rel="lightbox[group]"><img src="http://webgaku.hotcom-web.com/images/no3design/03s.jpg" alt="" width="160" height="240"></a></li>
            <li><a href="http://webgaku.hotcom-web.com/images/no3design/04.jpg" rel="lightbox[group]"><img src="http://webgaku.hotcom-web.com/images/no3design/04s.jpg" alt="" width="160" height="240"></a></li>
            <li><a href="http://webgaku.hotcom-web.com/images/no3design/05.jpg" rel="lightbox[group]"><img src="http://webgaku.hotcom-web.com/images/no3design/05s.jpg" alt="" width="160" height="240"></a></li>
            <li><a href="http://webgaku.hotcom-web.com/images/no3design/06.jpg" rel="lightbox[group]"><img src="http://webgaku.hotcom-web.com/images/no3design/06s.jpg" alt="" width="160" height="240"></a></li>
            <li><a href="http://webgaku.hotcom-web.com/images/no3design/07.jpg" rel="lightbox[group]"><img src="http://webgaku.hotcom-web.com/images/no3design/07s.jpg" alt="" width="160" height="240"></a></li>
            <li><a href="http://webgaku.hotcom-web.com/images/no3design/08.jpg" rel="lightbox[group]"><img src="http://webgaku.hotcom-web.com/images/no3design/08s.jpg" alt="" width="160" height="240"></a></li>
            <li><a href="http://webgaku.hotcom-web.com/images/no3design/09.jpg" rel="lightbox[group]"><img src="http://webgaku.hotcom-web.com/images/no3design/09s.jpg" alt="" width="160" height="240"></a></li>
            <li><a href="http://webgaku.hotcom-web.com/images/no3design/10.jpg" rel="lightbox[group]"><img src="http://webgaku.hotcom-web.com/images/no3design/10s.jpg" alt="" width="160" height="240"></a></li>
            <li><a href="http://webgaku.hotcom-web.com/images/no3design/11.jpg" rel="lightbox[group]"><img src="http://webgaku.hotcom-web.com/images/no3design/11s.jpg" alt="" width="160" height="240"></a></li>
            <li><a href="http://webgaku.hotcom-web.com/images/no3design/12.jpg" rel="lightbox[group]"><img src="http://webgaku.hotcom-web.com/images/no3design/12s.jpg" alt="" width="160" height="240"></a></li>
            </ul>
  </div>
  </div>
  <div id="footer">
    <address>Copyright &copy; 2012 no3design.</address>
  </div>
  </div>
</div>
</body>
</html>
CSS
@charset "utf-8";

/* reset */
* {
	margin:0;
	padding:0;	
}
img {
	border:none;	
}
ul {
	list-style-type:none;	
}
a:hover {
	text-decoration:none;
}

body {
	font-family:
	  "ヒラギノ角ゴ Pro W3",
	   "Hiragino Kaku Gothic Pro", 
	   "メイリオ", 
	   Meiryo, 
	   Osaka, 
	   "MS Pゴシック", 
	   "MS PGothic", 
	   sans-serif;
	background-color:#eee;
}   

#container {
    max-width:1000px;
    min-width:640px;
    margin:0 auto;
}

/* header */
#header {
    max-width:1000px;
    min-width:640px;
	margin:20px 0 0;
}
#header h1 {
	float:left;
    margin:0 0 20px;
}
#header h1 a {
	color:#000;
	text-decoration:none;
	text-shadow:1px 1px 3px #333;	
}
.deco {
	color:#999;
	
}

/* nav */
#nav{
	width:400px;
	margin:20px 0 0 0;
    float:right;
}
#nav ul li{
	float:left;
	display:block;
	width:100px;
	height:20px;
	text-align:center;
	line-height:20px;
}
#nav ul li a {
	color:#999;
	text-decoration:none;
}
#nav ul li a:hover {
	text-decoration:underline;
}
.current {
	color:#000;
	font-weight:bold;
}

/* wrappaer */
#wrapper {
    clear:both;
	overflow:auto;
	
	box-shadow: 1px 1px 10px #333;
	-moz-box-shadow: 1px 1px 10px #333;
	-webkit-box-shadow: 1px 1px 10px #333;
	-ms-box-shadow: 1px 1px 10px #333;
	
	-moz-border-radius: 15px;
  	-webkit-border-radius: 15px;
	-ms-border-radius: 15px;
  	border-radius: 15px;
    max-width:1240px;
    min-width:640px;
}

h2 {
	color:#fff;
	padding:20px;
	background-color:#1C2E3C;
	
	-moz-border-radius: 15px 15px 0 0;
  	-webkit-border-radius: 15px 15px 0 0;
	-ms-border-radius: 15px 15px 0 0;
  	border-radius: 15px 15px 0 0;
}

/* content */
#gallery {
    margin:0 auto;
}
#gallery li {
	margin:20px;
    width:160px;
    height:240px;
}

/* footer */
#footer {
    clear:both;
    margin:30px auto;
    padding:20px;
	text-align:center;
}
#footer address {
	font-style:normal;
}
javascript
$(function(){  
    $("#gallery").vgrid();  
});