題名の日本語がちょっとおかしい
ですね。済みません、語彙が無い
もので。リストで表示した画像を
フィルタリング出来るのと、マウス
オーバーやフィルタリング時の
エフェクトがクールなjQueryです。

動作テストをしたブラウザはChrome、IE7、8、Firefox、Opera、Safariです。

IE6でも動きますが、他ブラウザのように左寄せされません。が、エフェクトは問題ないです。cssでどうにかなるかな？

バージョンまでは確認していませんが、大抵のブラウザでは動くっぽいです。

Filter Image View

なかなかクールなエフェクトです。スライドして切り替わるのは素敵。

デモを用意しました。(別窓)

分かりやすいように色分けと数字を振っただけですが。

マークアップ

htmlはこんな感じです。

<ul class="menu">
<li class="selected"><a href="#" rel="all">全部</a></li>
<li><a href="#" rel="black">黒</a></li>
<li><a href="#" rel="red">赤</a></li>
<li><a href="#" rel="yellow">黄</a></li>
</ul>

<ul class="item">

<li rel="red"><a href="#"><img src="images/01.jpg" /></a></li>
<li rel="black"><a href="#"><img src="images/02.jpg" /></a></li>
<li rel="yellow"><a href="#"><img src="images/03.jpg" /></a></li>
<li rel="red"><a href="#"><img src="images/04.jpg" /></a></li>
<li rel="yellow"><a href="#"><img src="images/05.jpg" /></a></li>
<li rel="red"><a href="#"><img src="images/06.jpg" /></a></li>
<li rel="black"><a href="#"><img src="images/07.jpg" /></a></li>
<li rel="yellow"><a href="#"><img src="images/08.jpg" /></a></li>

</ul>

menuでrel属性指定、itemのrel属性がそれに合う形でフィルタリングします。

マウスオーバーの透過は

$('.item li img').animate({'opacity' : 0.5}).hover(function() {
	$(this).animate({'opacity' : 1});
}, function() {
	$(this).animate({'opacity' : 0.5});
});

あたりを変更すればOKっぽい。なかなか使えるかもです。以下よりダウンロードできますよ。

Filter Image View