Фильтр jQuery с изображениями

Question

Я ищу jQuery Script для изображений с несколькими фильтрами. Изображения должны быть скрыты и показываться только при нажатии любого фильтра. Я видел хорошее демо на странице, которое я хотел бы сделать так же, но сначала со скрытыми изображениями http://themetrust.com/demos/reveal/

Вот как я думаю: http://img696.imageshack.us/img696/6856/filtert.jpg

Answer 1

Должно быть довольно легко построить свой собственный.Может быть, это даст вам несколько идей: 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;
});

Answer 2

QuickSand , или что-то очень похожее должно быть то, что вы ищете. Возможно, вам придется сделать небольшую настройку, чтобы изначально скрыть изображения - я не очень знаком с плагином. Если подумать, что у вас есть категория, в которую не попадают никакие изображения (вы можете назвать ее blank), и когда вы щелкаете по ней (или в нашем случае, по умолчанию используется страница), изображения не будут видны.