88日目 | web制作

本日は…
■午前中はwordpressの自習
本日8章b1まで

■午後はポートフォリオに使えそうなjQueryプラグインの話などisotope.metafizzy.co
一世を風靡したソートするjQuery。
これの簡易版code.tutsplus.com
であるところのframeworks。

大事なところは

$(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("class").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('normal').addClass('hidden');
} else {
$(this).fadeIn('slow').removeClass('hidden');
}
});
}
return false;
});
});

ここ。

<div id="container">
<h1>framework.jsを使ったデモページ</h1>
<ul id="filter">
<li class="current"><a href="#" class="all">全部</a></li>
<li><a href="#" class="sky">空</a></li>
<li><a href="#" class="iron">鉄</a></li>
<li><a href="#" class="cat">猫</a></li>
<li><a href="#" class="abload">外国</a></li>
</ul>
<ul id="portfolio">
<li class="sky abload"><a href="#"><img src="img/02.jpg"></a></li>
<li class="sky abload"><a href="#"><img src="img/03.jpg"></a></li>
<li class="sky"><a href="#"><img src="img/08.jpg"></a></li>

<li class="iron abload"><a href="#"><img src="img/04.jpg"></a></li>
<li class="iron "><a href="#"><img src="img/05.jpg"></a></li>
<li class="iron abload"><a href="#"><img src="img/06.jpg"></a></li>

<li class="cat abload"><a href="#"><img src="img/01.jpg"></a></li>
<li class="cat"><a href="#"><img src="img/07.jpg"></a></li>
<li class="cat"><a href="#"><img src="img/09.jpg"></a></li>
</ul>

クラス名がポイント。

※cssがうまくいっていない。ソートするとずれたりするので、導入するには直す必要あり。

Google画像検索風スライダー
昨日のとあわせるとこんな感じになる。
※カテゴリ分けは適当
ざっと作ったのでこのまま導入はちょっと…。google風のほうをひらいたままソートするとひらきっぱなしになったり、ひらかなくなったりする。