jQuery Isotope with Fancybox

Question

jQuery Isotope로 필터링 할 수있는 Imagegallery로 웹 사이트를 만들었습니다. 당신은 작은 이미지를 클릭하면 다음 사이클이 fancybox 플러그인으로 이미지 물마루 :

Website

는 이제 일이의 Imagegallery 필터링에 beeing 때, fancybox 플러그인은 여전히 ​​사이클 모든 이미지 물마루된다. 필터 적용시 나타나지 않는 사람도 있습니다.

어떻게 해결할 수 있는지 잘 모르겠습니다.

팬시 박스는 rel="gallery"과 갤러리를 교환합니다. Isotope는 css 클래스를 통해 필터링 효과를 결정합니다. 그래서 필터링 된 CSS 클래스를 rel="" 태그 (동위 원소 필터링 클래스는 CMS에 의해 생성됨)에 광고하면 모든 것이 표시 될 때 모든 이미지를 순환 할 수 없게됩니다.

나는이 문제에 대해 정말로 머리를 써볼 수 없다. 어떤 아이디어가 있나요?

Answer 1

일부 코드가 도움이 될 것입니다. 그러나 필터링 된 이미지 작업을 위해 fancybox를 얻는 방법을 보여줄 수 있습니다.

rel = gallery가 아닌 data-fancybox-group = gallery입니다. .fancybox는 isotope의 필터 문자열로 fancybox를 호출하는 클래스입니다.

// filter buttons 
     $('#filters a').click(function(){ 
       var selector = $(this).attr('data-filter'); 
      $('#isotopegallery').isotope({ filter: selector }, function(){ 
      if(selector == "*"){ 
      $(".fancybox").attr("data-fancybox-group", "gallery"); 
      } else{ 
      $(selector).find(".fancybox").attr("data-fancybox-group", selector); 
      } 
      }); 
      return false; 
     }); 

모두 필터 버튼에 있습니다. 코드를 공유 할 수 없다면 공유하십시오.

Answer 2

ellenmva가 설명하는 방식으로 시도했지만 작동하지 못했습니다. 나는 $('#isotopegallery').isotope({ filter: selector }, function() 부분을 제거했다. 그래서 제가 남긴 것은 다음과 같습니다 :

$('.filterbutton').on("click", function(){ 
    var selector = $(this).attr('data-option-value'); 
    if(selector == "*"){ 
     $(".fancybox").attr("data-fancybox-group", "gallery"); 
    } else{ 
     $(selector).find(".fancybox").attr("data-fancybox-group", selector); 
    } 
    return false; 
}); 

그것은 트릭을하는 것처럼 보였습니다. 이제는 잘 작동합니다.