jQuery изотопная фильтрация без скрытия элементов

Question

Я пытаюсь использовать jQuery изотопный плагин (http://isotope.metafizzy.co) на сайте, который я строю. В сущности то, что я пытаюсь сделать, это результаты фильтрации, которые мне удалось сделать. ОДНАКО, когда я фильтрую результаты, я не хочу, чтобы другие результаты исчезли, я просто хочу, чтобы отфильтрованная опция выходила на передний план.

Я часами почесываю голову над этим. Вот мой JQuery:

$(function(){ 

    var $container = $('#cards'); 

    $container.isotope({ 
    itemSelector : '.blank' 
    }); 


    var $optionSets = $('#options .option-set'), 
     $optionLinks = $optionSets.find('a'); 

    $optionLinks.click(function(){ 
    var $this = $(this); 

    if ($this.hasClass('selected')) { 
     return false; 
    } 
    var $optionSet = $this.parents('.option-set'); 
    $optionSet.find('.selected').removeClass('selected'); 
    $this.addClass('selected'); 

    var options = {}, 
     key = $optionSet.attr('data-option-key'), 
     value = $this.attr('data-option-value'); 

    value = value === 'false' ? false : value; 
    options[ key ] = value; 
    if (key === 'layoutMode' && typeof changeLayoutMode === 'function') { 

     changeLayoutMode($this, options) 
    } else { 

     $container.isotope(options); 
    } 

    return false; 
    });  
}); 

и мой (упрощенный) HTML:

<section id="options" class="clearfix"> 
<ul id="filters" class="option-set clearfix" data-option-key="filter"> 
    <li><a href="#filter" data-option-value="*" class="selected">show all</a></li> 
    <li><a href="#filter" data-option-value=".christmas">Christmas</a></li> 
    <li><a href="#filter" data-option-value=".birthday">Birthday</a></li> 
    <li><a href="#filter" data-option-value=".thank-you">Thank You</a></li> 
    </ul> 

<div id="cards"> 
<div class="blank christmas"></div> 
<div class="blank christmas"></div> 
<div class="blank christmas"></div> 
<div class="blank christmas"></div> 
<div class="blank birthday"></div> 
<div class="blank birthday"></div> 
<div class="blank birthday"></div> 
<div class="blank thank-you"></div> 
<div class="blank thank-you"></div> 

и ссылку на JSfiddle (хотя анимация не по всей видимости, будет работать - но он работает на моем сайте, поэтому никаких проблем): http://jsfiddle.net/Yvv5x/3/

Любая помощь w следует приветствовать.

Answer 1

Работает fiddle.

Вы фактически не фильтруете, а сортируете. Поэтому я создал три разных ситуации сортировки (Рождество, день рождения и благодарность), с соответствующим атрибутом data- * для каждого элемента (в конечном итоге вы можете установить этот атрибут по коду).

Кроме того, вы называли

$container.isotope({ 
    itemSelector : '.blank' 
}); 

в начале, без всех необходимых опций.