이미지갤러리 필터에서 필터링 된 이미지만 표시하는법 (라이트박스)
본문
홈페이지를 구성하고 있습니다.
이미지 갤러리 부분에서
필터부분은 Isotope을 사용하였고. 라이트 박스는 baguetteBox을 사용했습니다.
필터예제: https://codepen.io/konyali/pen/WZQKwG
baguetteBox: https://demo.tutorialzine.com/2017/02/freebie-4-bootstrap-gallery-templates/#grid
이미지, 필터링은 잘 작동이 됩니다.
다만 필터를 눌러서 해당의 목록의사진들만 작동되어야 하는데
모든 이미지가 순환됩니다.
필터를 눌러 보이는 이미지만 라이트박스에 나오도록 변경하고싶습니다.
<script>
$('.filters ul li').click(function(){
$('.filters ul li').removeClass('active');
$(this).addClass('active');
var data = $(this).attr('data-filter');
$grid.isotope({
filter: data
})
});
var $grid = $(".grid").isotope({
itemSelector: ".all",
percentPosition: true,
masonry: {
columnWidth: ".all"
}
})
//# sourceURL=pen.js
</script>
여기에서 무엇을 추가해야할까요.
제 질문과 비슷한것으로 보이는 몇가지 대답입니다.
https://stackoverflow.com/questions/21241726/exclude-isotope-hidden-items-from-slideshow
https://stackoverflow.com/questions/14414180/jquery-isotope-filtering-with-fancybox
답변 1
소스 전체를 올리시면 더 확실한 답변을 얻으실 수 있을 것 같습니다.
옵션을 어떻게 하셨는지 알 수 가 없네요.
itemSelector: ".all" 이 부분이 맞는지 확인해 보세요.
아니면 소스 전체를 올려 주세요.
<section class="portfolio section">
<div class="filters">
<ul>
<li class="active" data-filter="*">All</li>
<li data-filter=".corporate">Corporate</li>
<li data-filter=".personal">Personal</li>
<li data-filter=".agency">Agency</li>
<li data-filter=".portal">Portal</li>
</ul>
</div>
<div class="filters-content tz-gallery">
<div class="row grid">
<div class="col-sm-3 all corporate">
<div class="item thumbnail">
<a class="lightbox" href="https://pbs.twimg.com/profile_images/3311153238/6ca7fd13cbf4acb6c63d483c4133cefd_400x400.png"> <img src="http://img.hani.co.kr/imgdb/resize/2011/0623/1308712047_130871203790_20110623.JPG" alt="Work 1"></a>
</div>
</div>
<div class="col-sm-3 all personal">
<div class="item thumbnail">
<a class="lightbox" href="https://pbs.twimg.com/profile_images/3311153238/6ca7fd13cbf4acb6c63d483c4133cefd_400x400.png"> <img src="http://img.hani.co.kr/imgdb/resize/2011/0623/1308712047_130871203790_20110623.JPG" alt="Work 1"></a>
</div>
</div>
<div class="col-sm-3 all agency">
<div class="item thumbnail">
<a class="lightbox" href="https://pbs.twimg.com/profile_images/3311153238/6ca7fd13cbf4acb6c63d483c4133cefd_400x400.png"> <img src="http://img.hani.co.kr/imgdb/resize/2011/0623/1308712047_130871203790_20110623.JPG" alt="Work 1"></a>
</div>
</div>
<div class="col-sm-3 all portal">
<div class="item thumbnail">
<a class="lightbox" href="https://pbs.twimg.com/profile_images/3311153238/6ca7fd13cbf4acb6c63d483c4133cefd_400x400.png"> <img src="http://img.hani.co.kr/imgdb/resize/2011/0623/1308712047_130871203790_20110623.JPG" alt="Work 1"></a>
</div>
</div>
</div>
</div></section>
입니다. 부트스트랩을 사용했구요..!