带有图像的jQuery过滤器

Question

我正在寻找一个多过滤器图像的jQuery脚本。图像应隐藏，仅在单击任何过滤器时显示。我在一个页面上看到了一个很好的演示，我想做同样的事情，但最初有隐藏的图像。 http://themetrust.com/demos/reveal/

以下是我的想法：http://img696.imageshack.us/img696/6856/filtert.jpg

Answer 1

QuickSand，或者非常相似的东西应该是您正在寻找的东西。你可能需要做一些调整才能最初隐藏图像 - 我对这个插件并不是很熟悉。一旦想到有一个没有图像的类别（你可以命名为blank），当你点击它（或者在我们的例子中，让页面默认为它）没有图像可见。

Answer 2

构建自己的应该相当容易。也许这会给你一些想法：http://jsfiddle.net/ZLfQG/2/

HTML

<div id="filter">
    <a href="#">Show All</a> |
    <a href="#" rel="cat">Show Cats</a> |
    <a href="#" rel="dog">Show Dogs</a> |
    <a href="#" rel="bird">Show Birds</a> |
    <a href="#" rel="none">Show None</a>
</div>

<hr />

<img src="cat1.jpg" class="cat" />
<img src="dog1.jpg" class="dog" />
<img src="dog2.jpg" class="dog" />
<img src="bird1.jpg" class="bird" />
<img src="cat2.jpg" class="cat" />
<img src="bird2.jpg" class="bird" />
<img src="cat3.jpg" class="cat" />
<img src="dog3.jpg" class="dog" />
<img src="bird3.jpg" class="bird" />

CSS

img {
    display: none;
}

JS

$('#filter a').click(function() {
    if($(this).attr('rel')) {
        $('img').hide().filter('[class="' + $(this).attr('rel') + '"]').show();
    } else {
        $('img').show();
    }

    return false;
});