Jquery зыбучие пески не масштабируется - PullRequest
Новая
       35

Jquery зыбучие пески не масштабируется

2 голосов
/ 22 марта 2012

Все работает так, как я хочу, единственная проблема заключается в том, что он не масштабируется, когда вы нажимаете на фильтры (одна кровать / две кровати), он только исчезает. Исходный пример quciksand исчезает и масштабируется между фильтрами

Вот мой пример 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/

1 Ответ

1 голос
/ 16 мая 2012

Вы добавили необходимые плагины в свой проект (как указано на исходном сайте)?

Если нет, сначала загрузите эти 2 плагина:

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

Я знаю, что на главном веб-сайте говорят, что вам нужно только добавить первый, но я пытался, и он не работал, пока я не добавил второй. Тогда не забудьте включить ссылку на эти плагины в теге head: 

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

Надеюсь, это сработает;)

...