2013-09-27 2 views
0

이미지 갤러리가있는 페이지가 있으며 jquery wookmark 플러그인을 사용하여 필터링하고 있습니다. 그런 다음 플러그인 색상 상자 (wookmark는 이미 플러그인의 예제로 제공)를 사용하고 싶었고 colorbox와 필터 시스템에 참여할 수있었습니다. 내 머리 속에는 문제가 있었고, 필터를 사용할 때, 50 장의 사진 대신 5 장 밖에 볼 수 없었습니다. 어떻게 그 5 장의 컬러 박스 만 보여줄 수 있습니까?Jquery 이벤트가 두 번째로 호출되지 않습니다.

그래서 나는이 같은 colorbox를 초기화 : 필터의 클릭 이벤트에 다음

$('li a').colorbox({ 
     rel: 'lightbox', scalePhotos: true, maxWidth: '80%', maxHeight: '80%' 
    }); 

, 난 가장 좋은 방법은 클릭이 있었다 때마다, 모든 이미지에서 colorbox를 제거하고 colorbox를 초기화하는 줄 알았는데 다음과 같이 활성 클래스가있는 li의 항목에 대해서만 다시 :

var onClickFilter = function(event) { 

     var item = $(event.currentTarget), activeFilters = []; 
     item.toggleClass('active'); 

     // Collect active filter strings 
     filters.filter('.active').each(function() { 
     activeFilters.push($(this).data('filter')); 
     }); 

     handler.wookmarkInstance.filter(activeFilters, 'or');  

    //here i remove colorbox from every item 
     $.colorbox.remove();   

     //here i instantiate colorbox for active item 
    $('#tiles li.active a').colorbox({ 
     rel: 'lightbox', scalePhotos: true, maxWidth: '80%', maxHeight: '80%' 
     }); 
    } 

그리고 약간의 효과가 있습니다. 예를 들어, 100 개의 이미지로 페이지를로드하고, 컬러 박스 갤러리는 100 개의 이미지를 보여줍니다. 필터를 클릭하면 10 개의 이미지가 표시되고 10 개의 이미지가 표시되고 다른 필터를 클릭하면 이미지가 24 개 표시되고 24 개의 이미지가 표시되며 24 개의 갤러리가 새로 고쳐집니다. 문제는 다시 클릭하면됩니다. 마지막 필터를 비활성화하면 colorbox는 더 이상 10 개의 이미지가 아니라 24 장만 볼 수 있습니다.

답변

0

글쎄, 실제로 내가 올린 글은 정확합니다. 누군가 그것을 사용하고 싶다면, 기꺼이 도와 드리겠습니다. 그러나 나는 나의 문제가 내가 설명한 것이 아니라는 것을 발견했다.

Wookmark 플러그인은 클래스를 추가 및 제거 만합니다. 그래서 wookmark의 js에서, 나는 아이템이 비활성 일 때 class class를 제거하지 않았습니다. 우리는 두 클래스 모두에 머무르고 있습니다. 활성 상태에서는 아무 것도 볼 수 없었습니다. 도와 주셔서 감사합니다 (브레인 스토밍) ...