필터에 내용 추가하기 동위 원소 기반 사이트에

Question

동위 원소를 사용하여 사이트를 만들었으며 필터 중 하나를 클릭 할 때 항목을 추가하는 데 문제가 있습니다.

이

내가 필터링을 위해 사용하고 스크립트입니다

<script type="text/javascript"> 
    // cache container 
    var $container = $('#container'); 
    // initialize isotope 
    $container.isotope({ 
     filter: '.front' 
    }); 

    // filter items when filter link is clicked 
    $('#filters a').click(function() { 
     var selector = $(this).attr('data-filter'); 
     $container.isotope({ filter: selector }); 
     return false; 
    }); 
</script> 

하지만 추가 또는 숨기기 해제 내용에 문제가 발생하고 완벽하게 작동, 내 코드에이 http://jsfiddle.net/RRgjD/에 적응하려고했습니다

하지만, 나는 자바 스크립트와 잘 어울리지 않고 내 얼굴에 떨어지는 것을 계속한다.

다음은 내가 사용중인 html의 예입니다.

<li><a href="#filter" data-filter=".identity, .menufilter">&mdash; Brand Identity</a></li> 
<li><a href="#filter" data-filter=".guidelines, .menufilter">&mdash; Brand Guidelines</a></li> 
<li><a href="#filter" data-filter=".photography, .menufilter">&mdash; Brand Photography</a></li> 
<li><a href="#filter" data-filter=".digital, .menufilter">&mdash; Digital</a></li> 


<div class="item cols-1 rows-1 identity"> 
    <span class="new-wrapper"> 
     <div class="post-thumb clearfix"> 
      <a title="Eternal friendship" href="#"> 
       <img src="images/thumbs/oxford.jpg" alt="brain" width="200" height="133"/> 
      </a> 
     </div> 
     <a href="#"><span> 
      <h2></h2> 
      <p> 
       <p></p> 
      </p> 
     </span></a> 
    </span> 
</div> 

어떤 도움이나 지침이 우수합니다. 동위 원소와 함께 제공되는 인서트 방법을 살펴 봤지만 머리가 잘 맞았으며 어디서부터 시작해야 할지도 모릅니다.

미리 감사드립니다.

는 편집 : 이것은 .front 클래스하지만 다른 클래스의 필터링을 필터링하기 시작

이 작동하지 않습니다

<script type="text/javascript"> 

$(function() { 

var $container = $('#container'), 
    $checkboxes = $('#filters a'); 

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

$container.isotope({ 
    filter: '.front' 
}); 

$checkboxes.change(function() { 
    var filters = []; 
    // get checked checkboxes values 
    $checkboxes.click(function(){ 
    var selector = $(this).attr('data-filter'); 
    $container.isotope({ filter: selector }); 
    return false; 
    }); 
    // ['.red', '.blue'] -> '.red, .blue' 
    filters = filters.join(', '); 
    $container.isotope({ 
     filter: filters 
    }, function($changedItems, instance) { 
     instance.$allAtoms.filter('.isotope-hidden').removeClass('is-filtered'); 
     instance.$filteredAtoms.addClass('is-filtered'); 
    }); 
}); 
}); 
</script> 

Answer 1

당신이 시작할 때 표시 할 클래스에 filter을 적용합니다 :

$container.isotope({ 
    filter: '.guidelines, .photography' 
}); 

이 예는 시작할 때 두 가지 카테고리를 보여줍니다. 기능을 망칠 수 jsFiddle

다른 일들이 지저분한 HTML/CSS (애니메이션, 눈에 보이는/숨겨진 요소 등)