2012-03-22 3 views
2

모든 것이 내가 원하는 방식으로 작동하고 있는데, 유일한 문제는 필터를 클릭 할 때 크기가 조정되지 않는다는 것뿐입니다. 원래 quciksand의 예는 페이드 및 필터Jquery quicksand scaling하지 않음

다음

사이 저울 내 예입니다 http://theoaks.turnpostadmin.com/floor-plans/

내 코드는 다음

// jQuery Quicksand project categories filtering 


jQuery.noConflict(); 
jQuery(document).ready(function($){ 
// Clone applications to get a second collection 
var $data = $(".portfolio-content").clone(); 

//NOTE: Only filter on the main portfolio page, not on the subcategory pages 
$('.portfolio-main li').click(function(e) { 
    $(".filter li").removeClass("active"); 
    // Use the last category class as the category to filter by. This means that multiple categories are not supported (yet) 
    var filterClass=$(this).attr('class').split(' ').slice(-1)[0]; 

    if (filterClass == 'all-projects') { 
     var $filteredData = $data.find('.project'); 
    } else { 
     var $filteredData = $data.find('.project[data-type=' + filterClass + ']'); 
    } 
    $(".portfolio-content").quicksand($filteredData, { 
     duration: 750, 
     easing: 'swing', 
     attribute: 'data-id', // attribute to recognize same items within source and dest 
     adjustHeight: 'auto', // 'dynamic' animates height during shuffling (slow), 'auto' adjusts it before or after the animation, false leaves height constant 
     useScaling: true, // disable it if you're not using scaling effect or want to improve performance 
     enhancement: function(c) {}, // Visual enhacement (eg. font replacement) function for cloned elements 
     selector: '> *', 
     dx: 0, 
     dy: 0 
    }, function() { 
    });  
    $(this).addClass("active");    
    return false; 
}); 
    }); 

원래 http://razorjack.net/quicksand/

+0

당신이 대답을하시기 바랍니다 받아 들일 수)

<script type="text/javascript" src="js/jquery-css-transform.js" ></script> <script type="text/javascript" src="js/jquery-animate-css-rotate-scale.js" ></script> 

나는 그것이 작동 바랍니다 : 그런 다음 머리 태그에서 이러한 플러그인에 대한 링크를 포함하는 것을 잊지 마세요. 감사. – Mehdiway

답변

1

는 당신이 필요한 플러그인을 추가 했 당신의 프로젝트 (원래 웹 사이트에서 언급 한대로)?

그렇지 않으면 먼저 다음이 플러그인 다운로드 :

https://github.com/zachstronaut/jquery-animate-css-rotate-scale/blob/master/jquery-animate-css-rotate-scale.js

https://github.com/zachstronaut/jquery-css-transform/blob/master/jquery-css-transform.js

내가 기본 웹 사이트에 그들은 당신이 첫 번째 하나를 추가 할 필요가 있다고 알고,하지만 난 시도 두 번째 추가 할 때까지 작동하지 않았다.

관련 문제