題名の日本語がちょっとおかしい
ですね。済みません、語彙が無い
もので。リストで表示した画像を
フィルタリング出来るのと、マウス
オーバーやフィルタリング時の
エフェクトがクールな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っぽい。なかなか使えるかもです。以下よりダウンロードできますよ。