[jQuery Plugin] isotope.js 필터와 이미지정렬 플러그인 사용 방법

 

isotope.js는 항목별로 볼 수 있는 필터와 이미지 정렬을 해주는 플러그인입니다.

포트폴리오 형태나 제품 소개 항목에 넣으면 보기 좋게 정렬을 시켜줘요!

 

다운로드와 샘플은 아래의 해당 사이트에서 해주시면 됩니다 :) 

 

https://isotope.metafizzy.co/

Isotope · Filter & sort magical layouts

 

사용 방법

<script src="js/isotope.pkgd.min.js"></script>

1. isotope.js를 head 사이에 넣어줍니다.

 

<section class="portfolio_section">
                <ul class="btn_set">
                    <li class="on">
                        <a href="#" data-filter="*">All</a>
                    </li>
                    <li>
                        <a href="#" data-filter=".design">Design</a>
                    </li>
                    <li>
                        <a href="#" data-filter=".publishing">Publishing</a>
                    </li>
                    <li>
                        <a href="#" data-filter=".responsive">Responsive </a>
                    </li>
                </ul>
                <div class="portfolio_item_wrap">
                    <div class="portfolio_item publishing"> //해당 filter class
                    </div> 
                    <div class="portfolio_item design"> //해당 filter class
                    </div> 
                    <div class="portfolio_item responsive"> //해당 filter class
                    </div> 
                    
                </div>
</section>
                    

2. html 구조를 잡아줍니다. 

필터 버튼이 되어줄. btn_set의 a태그에는 data-filter="class명" 을 넣어주어야 필터 기능이 정상적으로 작용합니다!

그리고 div에 해당하는 필터의 data-filter="class명"을 똑같이 적어주시면 됩니다.

 

 $(document).ready( function() {   

$('.portfolio_item_wrap').isotope({
  itemSelector: '.portfolio_item',
});

// filter items on button click
$('.btn_set').on( 'click', 'li', function() {
  var filterValue = $(this).children().attr('data-filter');
  $('.portfolio_item_wrap').isotope({ filter: filterValue });
  $('.btn_set li').removeClass('on');
  $(this).addClass('on');
});
    })

3. 스크립트 부분을 넣어주고 css로 style을 잡아주시면 됩니다 : )

 

 

적용 사진

 

포트폴리용으로 굉장히 잘 사용 중인 플러그인이기 때문에

포트폴리오용으로 유용하게 쓰일 것 같아요!