이미지갤러리 필터에서 필터링 된 이미지만 표시하는법 (라이트박스) 채택완료
홈페이지를 구성하고 있습니다.
이미지 갤러리 부분에서
필터부분은 Isotope을 사용하였고. 라이트 박스는 baguetteBox을 사용했습니다.
필터예제: https://codepen.io/konyali/pen/WZQKwG" target="_blank">https://codepen.io/konyali/pen/WZQKwG
baguetteBox: https://demo.tutorialzine.com/2017/02/freebie-4-bootstrap-gallery-templates/#grid" target="_blank">https://demo.tutorialzine.com/2017/02/freebie-4-bootstrap-gallery-templates/#grid
이미지, 필터링은 잘 작동이 됩니다.
다만 필터를 눌러서 해당의 목록의사진들만 작동되어야 하는데
모든 이미지가 순환됩니다.
필터를 눌러 보이는 이미지만 라이트박스에 나오도록 변경하고싶습니다.
</strong></p>
<p><script></p>
<p>$('.filters ul li').click(function(){</p>
<p> $('.filters ul li').removeClass('active');</p>
<p> $(this).addClass('active');</p>
<p> </p>
<p> var data = $(this).attr('data-filter');</p>
<p> $grid.isotope({</p>
<p> filter: data</p>
<p> })</p>
<p>});</p>
<p> </p>
<p>var $grid = $(".grid").isotope({</p>
<p> itemSelector: ".all",</p>
<p> percentPosition: true,</p>
<p> masonry: {</p>
<p> columnWidth: ".all"</p>
<p> }</p>
<p>})</p>
<p>//# sourceURL=pen.js</p>
<p> </p>
<p> </p>
<p></script></p>
<p><strong>
여기에서 무엇을 추가해야할까요.
제 질문과 비슷한것으로 보이는 몇가지 대답입니다.
https://stackoverflow.com/questions/21241726/exclude-isotope-hidden-items-from-slideshow" target="_blank">https://stackoverflow.com/questions/21241726/exclude-isotope-hidden-items-from-slideshow
https://stackoverflow.com/questions/5864488/isotope-filtered-images-how-to-only-show-the-visible-filtered-images-in-li" target="_blank">https://stackoverflow.com/questions/5864488/isotope-filtered-images-how-to-only-show-the-visible-filtered-images-in-li
https://stackoverflow.com/questions/14414180/jquery-isotope-filtering-with-fancybox" target="_blank">https://stackoverflow.com/questions/14414180/jquery-isotope-filtering-with-fancybox
답변 1개
답변을 작성하려면 로그인이 필요합니다.
로그인
<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>
입니다. 부트스트랩을 사용했구요..!