카테고리/태그 선택기

Question

내가 만들고있는 맞춤 wp 테마에 포트폴리오 갤러리를 추가하려고합니다. 나는 솔루션과 플러그인을 찾아 내려고 노력하면서 지쳤다. 해결책을 찾는데있어서의 제 문제 중 하나는 검색 용어가 내가 성취하고자하는 것과 비슷한 것을 찾는 데 도움이 될만한 검색 용어가 아니라는 것입니다.

현재로서는 다음과 같은 div가 있습니다. 내 내비게이션

<div id="tags" role="navigation"> 
<p> 
<a class="portrait" href="#portrait">Portrait</a>/
<a class="landscape" href="#landscape">Landscape</a>/
<a class="sports" href="#sports">Sports</a>/
<a class="nature" href="#nature">Nature</a>/
<a class="weddings" href="#weddings">Weddings</a>/
<a class="active" href="#">All</a> 
</p> 
</div> 

내 탐색 아래에 내 이미지 div가 있습니다. 내가하고 싶은 것은 이미지 네비게이션에서 카테고리를 선택하고 태그가 지정된 이미지 만 표시하도록 할 수 있습니다. 내가 원하지 않는 것은 태그/선택을 위해 새 페이지를 열어 놓는 것입니다. 선택한 탐색에 대해 이미지를 재구성하거나 페이드 인/아웃하고 싶습니다.

내가 찾고있는 것과 비슷한 스크립트 또는 플러그인이 있는지 확인하십시오. 아니면 이것을 달성하는 방법에 대한 약간의 지침/제안이 인정 될 것입니다.

미리 감사드립니다.

Answer 1

모래 수렁의 jQuery 플러그인 당신을 위해 그렇게 할 것입니다 :

http://razorjack.net/quicksand/

동위 원소 플러그인의

:

http://isotope.metafizzy.co/

또는 일부 CSS3 사용 :

http://tympanus.net/Tutorials/CSS3FilterFunctionality/

Answer 2

을

ID가 'tagImages'인 div가 있다고 가정하고 각 이미지에 앵커 클래스와 이름이 같은 데이터 속성을 지정하면이 코드가 작동합니다.

예상 HTML은

<div id="tagImages"> 
    <img src="/location/image.jpg" data-category="portrait" /> 
    <img src="/location/image.jpg" data-category="nature" /> 
    <img src="/location/image.jpg" data-category="nature" /> 
    <img src="/location/image.jpg" data-category="weddings" /> 
</div>​ 

jQuery를 코드

$('#tags').on('click', 'a', function(e) { 
    e.preventDefault(); 
    var cat = $(this).attr('class'), 
     $tagImg = $('#tagImages').find('img'); 
    $tagImg.hide(); 
    if (cat === 'active') { 
     $tagImg.show(); 
    } else { 
     $tagImg.each(function() { 
      if ($(this).data('category') == cat) { 
       $(this).show(); 
      } 
     }); 
    } 
});​ 

여기에 당신이 요구하는지 보여줍니다하는 jsFiddle Example입니다.