初心者のWEBデザイン

HTML,CSS、その他WEBデザインに関する事を記述していきます

20150411143621

jQuery Frameworksでソート機能をつける

jQueryでソート機能をつけてみます。
とてもシンプルな記述でソートがつけられます。

以前のデータの流用なのでFancyboxも適応しているものになります。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Fnacy Box</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/jquery.fancybox.css">
<link rel="stylesheet" href="css/screen.css">
<link rel="stylesheet" href="css/caption.css">
<script src="js/jquery-1.10.1.min.js"></script>
<script src="js/jquery.fancybox.js"></script>
<script src="js/jquery.mousewheel-3.0.6.pack.js"></script>
<script src="js/framework.js"></script>
</head>
<body>
<div id="container">
<h1>framework.jsを使ったデモページ</h1>
	<ul id="filter">
		<li class="current"><a href="#" rel="all">全部</a></li>
		<li><a href="#" rel="red">赤いもの</a></li>
		<li><a href="#" rel="green">緑のもの</a></li>
		<li><a href="#" rel="yellow">黄色いもの</a></li>
		<li><a href="#" rel="fruits">くだもの</a></li>
		<li><a href="#" rel="vegitable">野菜</a></li>
		<li><a href="#" rel="web">サイト</a></li>
	</ul>
	<div id="content">
		<ul id="portfolio">
			<li  id="figure1" class="red"><a class="fancybox-thumb" rel="fancybox-thumb"  href="img/color/01.png" title="tomato1"><img src="img/color/01s.png" title="#">
			<div id="cap1">
					<h3>CSSによるキャプション</h3>
					<p>ホバーするとキャプションが出てきます。</p>
				</div>
			</a></li>
			<li id="figure2" class="red"><a class="fancybox-thumb" rel="fancybox-thumb"  href="img/color/02.png" title="tomato2"><img src="img/color/02s.png" title="#">
			<div id="cap2">
					<h3>CSSによるキャプション</h3>
					<p>ホバーするとキャプションが出てきます。</p>
				</div>
			</a></li>
			<li id="figure3" class="red fruits"><a class="fancybox-thumb" rel="fancybox-thumb"  href="img/color/03.png" title="tomato3"><img src="img/color/03s.png" title="#">
			<div id="cap3">
					<h3>CSSによるキャプション</h3>
					<p>ホバーするとキャプションが出てきます。</p>
				</div>
			</a></li>
			<li id="figure4" class="green"><a class="fancybox-thumb" rel="fancybox-thumb"  href="img/color/04.png" title="Lettuce1"><img src="img/color/04s.png" title="#">
			<div id="cap4">
					<h3>CSSによるキャプション</h3>
					<p>ホバーするとキャプションが出てきます。</p>
				</div>
			</a></li>
			<li id="figure5"class="green"><a class="fancybox-thumb" rel="fancybox-thumb"  href="img/color/05.png" title="Lettuce2"><img src="img/color/05s.png" title="#">
				<div id="cap5">
					<h3>CSSによるキャプション</h3>
					<p>ホバーするとキャプションが出てきます。</p>
				</div>
			</a></li>
			<li class="green vegitable"><a class="fancybox-thumb" rel="fancybox-thumb"  href="img/color/06.png" title="Lettuce3"><img src="img/color/06s.png" title="#"></a></li>
			<li class="yellow"><a class="fancybox-thumb" rel="fancybox-thumb"  href="img/color/07.png" title="Orange1"><img src="img/color/07s.png" title="#"></a></li>
			<li class="yellow"><a class="fancybox-thumb" rel="fancybox-thumb"  href="img/color/08.png" title="Orange2"><img src="img/color/08s.png" title="#"></a></li>
			<li class="yellow fruits"><a class="fancybox-thumb" rel="fancybox-thumb"  href="img/color/09.png" title="Orange3"><img src="img/color/09s.png" title=="#"></a></li>
	</ul>
	</div><!--content-->
</div><!--container-->

</body>
</html>
/* Portfolio Filter Stylesheet */

/*****Reset*****/
/* reset */
html, body, div, h1, h2, h3, h4, h5, h6,p, blockquote, pre, 
address,ul, ol, li, dl, dt, dd,table, th, td, form, fieldset {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Lucida Grande",
    "Hiragino Kaku Gothic ProN",
    Meiryo, 
    sans-serif;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
ul, ol {
  list-style: none; /* マーカーを消す */
}
a {
  text-decoration: none; /* 下線を消す */
}
img {
  border: 0;
}
img, input {
  vertical-align: bottom;
}

/*****Basic Definitions*****/
body { 
  color: #333; 
  font: 12px/18px Verdana, Helvetica, Arial, sans-serif;
}
p, ul, ol, dl, table {
	 margin-bottom: 18px; 
	}
ul, ol, dd {
	 margin-left: 36px; 
	}

/*****Basic Layout*****/
div#container {
	 margin: 0 auto;
	 overflow: hidden; 
	 width: 800px;
}
	
h1 {
	text-align: center;
	margin: 20px;
	font-size: 24px;
	font-family:"Times New Roman", Times, serif;
}

ul#filter { 
   float: left; 
	 font-size: 16px; 
	 list-style: none; 
	 margin-top: 30px;
	 width: 800px;
	 margin-left: 64px;
   }

ul#filter li { 
	border-right: 1px solid #dedede;
	float: left;
	line-height: 16px;
	margin-right: 10px;
	padding-right: 10px;
  }
	
ul#filter li:last-child {
	 border-right: none; 
	 margin-right: 0; 
	 padding-right: 0; 
	}
	
ul#filter a {
	 color: #999;
	}
	
ul#filter li.current a, ul#filter a:hover {
	 text-decoration: underline; 
	}
	
ul#filter li.current a {
	 color: #333; 
	 font-weight: bold;
	}

ul#portfolio {
	 float: left; 
	 list-style: none;
	 margin-left: 64px; 
	 width: 672px; 
	}
	
ul#portfolio li { 
	border: 1px solid #dedede; 
	float: left; 
	margin: 0 10px 10px 0; 
	padding: 5px;
	width: 202px;
}

ul#portfolio a {
	 display: block;
	 width: 100%; 
	}
ul#portfolio img {
	 border: 1px solid #dedede;
	 display: block; }



screen.css

/* Portfolio Filter Stylesheet */

/*****Reset*****/
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td { margin: 0; padding: 0; }

/*****Basic Definitions*****/
body { color: #333; font: 12px/18px Verdana, Helvetica, Arial, sans-serif; }
h1 { font-size: 1.667em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.333em; }
h4 { font-size: 1.167em; }
h5, h6 { font-size: 1em; }

a { color: #333; }
a:visited { }
a:hover { text-decoration: none; }
p, ul, ol, dl, table { margin-bottom: 18px; }
ul, ol, dd { margin-left: 36px; }

/*****Custom Classes*****/
.clearing { clear: both; }
.last { margin-bottom: 0; }
.screenReader { left: -9999px; position: absolute; top: -9999px; }

/*****Basic Layout*****/
div#container { margin: 20px auto 0; overflow: hidden; width: 672px; }

ul#filter { float: left; font-size: 16px; list-style: none; margin-left: 0; width: 100%; }
ul#filter li { 
	border-right: 1px solid #dedede;
	float: left;
	line-height: 16px;
	margin-right: 10px;
	padding-right: 10px;
}
ul#filter li:last-child { border-right: none; margin-right: 0; padding-right: 0; }
ul#filter a { color: #999; text-decoration: none; }
ul#filter li.current a, ul#filter a:hover { text-decoration: underline; }
ul#filter li.current a { color: #333; font-weight: bold; }

ul#portfolio { float: left; list-style: none; margin-left: 0; width: 672px; }
ul#portfolio li { 
	border: 1px solid #dedede; 
	float: left; 
	margin: 0 10px 10px 0; 
	padding: 5px;
	width: 202px;
}
ul#portfolio a { display: block; width: 100%; }
ul#portfolio a:hover { text-decoration: none; }
ul#portfolio img { border: 1px solid #dedede; display: block; padding-bottom: 5px; }
@charset "UTF-8";
/* CSS Document */

h3 , p {
	padding: 10px;
	color:#FFF;
	text-align:left;
}
h3 {
	font-size:12px;
}
p {
	font-size:8px;
}
#figure1 {
	display:block;
	position: relative;
	overflow:hidden;
	width:200px;/*サムネイル画像の幅と同じ*/
}
#figure1:hover #cap1 {
	opacity: 1;
}

#cap1{
	position:absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width:100%;
	height:100%;
	background: rgba(0,0,0,0.6);
	transition: 0.8s;
	opacity: 0;
}
#figure2 {
	display:block;
	position: relative;
	overflow:hidden;
	width:200px;/*サムネイル画像の幅と同じ*/
}
#cap2 {
	position:absolute;
	top: -100%;
	left: 0;
	z-index: 2;
	width:100%;
	height:100%;
	background: rgba(0,0,0,.6);
	-webkit-transform:.8s;
	transition: 0.7s;
	opacity: 1;
}
#figure2:hover #cap2 {
	top:0;
	left:0;
}
#figure3 {
	display:block;
	position: relative;
	overflow:hidden;
	width:200px;/*サムネイル画像の幅と同じ*/
}
#cap3 {
	position:absolute;
	top: 0;
	left: -100%;
	z-index: 2;
	width:100%;
	height:100%;
	background: rgba(0,0,0,.6);
	-webkit-transform:.3s;
	transition: 0.7s;
	opacity: 1;
}
#figure3:hover #cap3 {
	top:0;
	left:0;
}

#figure4 {
	display:block;
	position: relative;
	overflow:hidden;
	width:200px;/*サムネイル画像の幅と同じ*/
}
#cap4 {
	position:absolute;
	top: 0;
	right: -100%;
	z-index: 2;
	width:100%;
	height:100%;
	background: rgba(0,0,0,.6);
	-webkit-transform:.3s;
	transition: 0.7s;
	opacity: 1;
}
#figure4:hover #cap4 {
	top:0;
	right:0;
}
#figure5 {
	display:block;
	position: relative;
	overflow:hidden;
	width:200px;/*サムネイル画像の幅と同じ*/
}
#cap5 {
	position:absolute;
	bottom: -100%;
	right: 0;
	z-index: 2;
	width:100%;
	height:100%;
	background: rgba(0,0,0,.6);
	-webkit-transform:.3s;
	transition: 0.7s;
	opacity: 1;
}
#figure5:hover #cap5 {
	bottom:0;
	right:0;
}
$(document).ready(function() {
    $(".single_1").fancybox({
    	helpers : {
    		title : {
    			type : 'over'
    		}
    	}
    });
});
$(document).ready(function() {
	$(".fancybox-thumb").fancybox({
		prevEffect	: 'none',
		nextEffect	: 'none',
		helpers	: {
			title	: {
				type: 'inside'
			},
			thumbs	: {
				width	: 50,
				height	: 50
			}
		}
	});
});
$(document).ready(function() {
	$(".various").fancybox({
		maxWidth	: 800,
		maxHeight	: 600,
		fitToView	: false,
		width		: '70%',
		height		: '70%',
		autoSize	: false,
		closeClick	: false,
		openEffect	: 'none',
		closeEffect	: 'none'
	});
});
$(document).ready(function() {
	$('ul#filter a').click(function() {
		$(this).css('outline','none');
		$('ul#filter .current').removeClass('current');
		$(this).parent().addClass('current');
		
		var filterVal = $(this).attr("rel").toLowerCase().replace(' ','-');
		if(filterVal == 'all') {
			$('ul#portfolio li.hidden').fadeIn('slow').removeClass('hidden');
		} else {
			
			$('ul#portfolio li').each(function() {
				if(!$(this).hasClass(filterVal)) {
					$(this).fadeOut('slow').addClass('hidden');
				} else {
					$(this).fadeIn('slow').removeClass('hidden');
				}
			});
		}
		return false;
	});
});

topへ戻る