fancybox에서 동위 원소 필터링 관련 문제가 발생했습니다.

Question

친구 용 작은 포트폴리오 사이트를 만들기 위해 편집 한 무료 반응 형 웹 템플릿을 사용하고 있습니다. 내가 겪고있는 문제는 팬시 박스 창에서 특정 이미지 갤러리와 뷰를 선택하면 특정 갤러리의 이미지뿐만 아니라 모든 이미지를 계속 클릭한다는 것입니다.

나는이 솔루션 (https://groups.google.com/forum/#!topic/fancybox/ncVsViD2v9o)을 찾았지만 실제로는 자바 스크립트에 대한 지식이 없으므로이 스크립트가 나에게 효과적인지 또는 템플릿의 코드로 구현하는지 확신 할 수 없다.

HTML

<!-- Portfolio Projects --> 
 
<div class="row"> 
 
    <div class="span3"> 
 
    <!-- Filter --> 
 
    <nav id="options" class="work-nav"> 
 
     <ul id="filters" class="option-set" data-option-key="filter"> 
 
     <li class="type-work">Photography</li> 
 
     <li><a href="#filter" data-option-value="*" class="selected">All Images</a> 
 
     </li> 
 
     <li><a href="#filter" data-option-value=".people">People</a> 
 
     </li> 
 
     <li><a href="#filter" data-option-value=".places">Places</a> 
 
     </li> 
 
     <li><a href="#filter" data-option-value=".things">Things</a> 
 
     </li> 
 
     </ul> 
 
    </nav> 
 
    <!-- End Filter --> 
 
    </div> 
 

 
    <div class="span9"> 
 
    <div class="row"> 
 
     <section id="projects"> 
 
     <ul id="thumbs"> 
 

 
      <!-- Item Project and Filter Name --> 
 
      <li class="item-thumbs span3 people"> 
 
      <!-- Fancybox - Gallery Enabled - Title - Full Image --> 
 
      <a class="hover-wrap fancybox" data-fancybox-group="gallery" title="John" href="_include/img/work/full/people-01-full.jpg"> 
 
       <span class="overlay-img"></span> 
 
       <span class="overlay-img-thumb font-icon-plus"></span> 
 
      </a> 
 
      <!-- Thumb Image and Description --> 
 
      <img src="_include/img/work/thumbs/people-01.jpg" alt="Print Number 1–10"> 
 
      </li> 
 
      <!-- End Item Project --> 
 

 
      <!-- Item Project and Filter Name --> 
 
      <li class="item-thumbs span3 things"> 
 
      <!-- Fancybox - Gallery Enabled - Title - Full Image --> 
 
      <a class="hover-wrap fancybox" data-fancybox-group="gallery" title="Garden Wall" href="_include/img/work/full/things-07-full.jpg"> 
 
       <span class="overlay-img"></span> 
 
       <span class="overlay-img-thumb font-icon-plus"></span> 
 
      </a> 
 
      <!-- Thumb Image and Description --> 
 
      <img src="_include/img/work/thumbs/things-07.jpg" alt="Print Number 1–22"> 
 
      </li> 
 
      <!-- End Item Project -->

BRUSHED.filter = function() { 
 
    if ($('#projects').length > 0) { 
 
    var $container = $('#projects'); 
 

 
    $container.imagesLoaded(function() { 
 
     $container.isotope({ 
 
     // options 
 
     animationEngine: 'best-available', 
 
     itemSelector: '.item-thumbs', 
 
     layoutMode: 'fitRows' 
 
     }); 
 
    }); 
 

 

 
    // filter items when filter link is clicked 
 
    var $optionSets = $('#options .option-set'), 
 
     $optionLinks = $optionSets.find('a'); 
 

 
    $optionLinks.click(function() { 
 
     var $this = $(this); 
 
     // don't proceed if already selected 
 
     if ($this.hasClass('selected')) { 
 
     return false; 
 
     } 
 
     var $optionSet = $this.parents('.option-set'); 
 
     $optionSet.find('.selected').removeClass('selected'); 
 
     $this.addClass('selected'); 
 

 
     // make option object dynamically, i.e. { filter: '.my-filter-class' } 
 
     var options = {}, 
 
     key = $optionSet.attr('data-option-key'), 
 
     value = $this.attr('data-option-value'); 
 
     // parse 'false' as false boolean 
 
     value = value === 'false' ? false : value; 
 
     options[key] = value; 
 
     if (key === 'layoutMode' && typeof changeLayoutMode === 'function') { 
 
     // changes in layout modes need extra logic 
 
     changeLayoutMode($this, options) 
 
     } else { 
 
     // otherwise, apply new options 
 
     $container.isotope(options); 
 
     } 
 

 
     return false; 
 
    }); 
 
    } 
 
}

JS : 나는 아래의 관련 JS입니다 믿는 html로의 부분과 무엇을 포함 시켰습니다

어떤 통찰력이라도 대단히 감사 드리며 더 이상 정보를 제공해야하는지 알려주세요.

감사합니다!

Answer 1

귀하의 라이브 링크는 정말 도움이되었습니다.
멋진 프레젠테이션.

그래서 ... 제가 어제 댓글에서 말한 것처럼 data-fancybox-group 속성을 변경하는 것과 같은 문제에 대한 해결책은 카테고리 링크를 클릭해야합니다.

선택한 카테고리의 사진은 FancyBox 그룹의 "갤러리"에 있으면 안됩니다. 그러나 "선택한"갤러리에서는. FancyBox를 실행하기 위해 클릭 한 것과 같은 갤러리 이름을 가진 그림 만 표시됩니다.

// find the clicked category 
var fancyBoxClassToShow = $(this).attr("data-option-value"); 

// reset all data-fancybox-group (in case of a previous selection) 
$("#thumbs").find(".item-thumbs").each(function(){ 
    $(this).find("a").attr("data-fancybox-group","gallery") 
}); 

// change all data-fancybox-group that IS a child of the clicked category 
$("#thumbs").find(fancyBoxClassToShow).each(function(){ 
    $(this).find("a").attr("data-fancybox-group","gallerySelected") 
}); 

내가 바로 var $this = $(this); 위에, 당신의 $optionLinks.click 기능 만이 줄을 추가 : 여기

내가 추가 한 코드입니다.

그리고 그게 전부입니다.
CodePen here을 참조하십시오.