Implementing quicksand jquery plugin

Question

I try to make a portfolio page as you can see here. When you click one of these filter item; nothings happen. no animated effect, no new sorting.. nothing! Could you please help me to fix this?

Here's the dynamic content loader code:

//JavaScript Dynamic Content using jQuery
//www.mclelun.com

$(document).ready(function(){
var jqc_vHash = window.location.hash;
var jqc_intInterval = 0;
var jqc_vDuration = 2000;

//Check if there is hash data on first load
if (jqc_vHash)
{
    jqc_fnLoad(jqc_vHash);
}

//FUNCTION: LOAD CONTENT
function jqc_fnLoad(p_ID){

    p_ID = p_ID.substr(1,p_ID.length);

    $("#jqc_loading")
        .css({visibility:"visible"})
        .css({opacity:"1"})
        .css({display:"block"});

    $("#jqc_content").animate({ height: 'hide' }, 500, function() { 
        $("#jqc_content").empty().load("content/"+p_ID+".html", jqc_fnDone);
    });

    //UPDATE LIST COLOR
    $("#jqc_menu").find("li").each(function() { 
        if(this.id == p_ID)
        {
            $(this).css("color", "");
        }
        else
        {
            $(this).css("color", "");
        }
    });
}

//LIST CLICK
$("#jqc_menu li").click(function(){
    clearInterval(jqc_intInterval);
    jqc_vHash = "#" + this.id;
    jqc_fnLoad(jqc_vHash);
    document.location.hash = jqc_vHash;
});

//LINK CLICK
$("#jqc_menu_link a").click(function(e){
    clearInterval(jqc_intInterval);
    jqc_vHash = "#" + this.id;
    jqc_fnLoad(jqc_vHash);
    document.location.hash = jqc_vHash;
    e.preventDefault();
});

//FUNCTION: CHECK HASH CHANGE
function jqc_fnLoop()
{
    var tmpHash = window.location.hash;
    if(tmpHash)
    {
        if(tmpHash != jqc_vHash)
        {
            jqc_vHash = tmpHash;
            jqc_fnLoad(jqc_vHash);
        }

    }
}

//FUNCTION: DONE LOADING
function jqc_fnDone()
{
    $("#jqc_content").animate({ height: 'show' }, 500);
    $("#jqc_loading").fadeTo(1000, 0);
    jqc_intInterval = setInterval(jqc_fnLoop, jqc_vDuration);
    if($('#map-canvas').length && !$('#map-canvas div').length){initialize();}
};

});

and this is the sorting code;

    $(document).ready(function(){
  var pclone = $(".portfolio").clone();

  $("#sort a").on("click", function(e){
    e.preventDefault();
    var sorttype = $(this).attr("class");

    // determine if another link is selected
    if(!$(this).hasClass("selected")) {
      $("#sort a").removeClass("selected");
      $(this).addClass("selected");
    }

    // check filter sort type
    if(sorttype == "all") {
      var filterselect = pclone.find("li");
    } else {
      var filterselect = pclone.find("li[class="+sorttype+"]");
    }

    $(".portfolio").quicksand(filterselect, 
    {
      adjustHeight: 'auto',
      duration: 550
    }, function() { 
      // callback function
    });
  }); // end click event listener
});

html structure;

    <div id="w">
<div class="sort" id="sort"><span class="label">Filter By:</span> <a href="#" class="all selected">All</a> <a href="#" class="web">Web</a> <a href="#" class="ios">iOS</a> <a href="#" class="print">Print</a></div>


<ul class="portfolio clearfix">

  <li data-id="id-1" data-lightbox="example-set" class="ios"><a class="example-image-link" href="../img/image-3.jpg" data-lightbox="example-set" title="pic1 lorem ipsum dolar bitch!"><img  src="images/ios-app-ui-01.png" class="portimg"></a></li>


          <li data-id="id-2" data-lightbox="example-set" class="ios"><a class="example-image-link" href="../img/image-6.jpg" data-lightbox="example-set" title="pic2 lorem ipsum dolar bitch!"><img  src="images/print-design-cards.png" class="portimg"></a></li>



  <li data-id="id-3" class="ios"><a href="" target="_blank"><img src="images/ios-app-ui-02.png" class="portimg"></a></li>

  <li data-id="id-4" class="print"><a href="" target="_blank"><img src="images/print-winery-card.png" class="portimg"></a></li>

  <li data-id="id-5" class="web"><a href="" target="_blank"><img src="images/website-layout-header.png" class="portimg"></a></li>

  <li data-id="id-6" class="web"><a href="" target="_blank"><img src="images/website-base-header.png" class="portimg"></a></li>

  <li data-id="id-7" class="print"><a href="" target="_blank"><img src="images/print-cyan-announcement-cards.png" class="portimg"></a></li>

  <li data-id="id-8" class="web"><a href="" target="_blank"><img src="images/website-logo-header-image.png" class="portimg"></a></li>

  <li data-id="id-9" class="ios"><a href="" target="_blank"><img src="images/ios-ipad-app-03.png" class="portimg"></a></li>

  <li data-id="id-10" class="ios"><a href="" target="_blank"><img src="images/ios-tabbar-app-04.png" class="portimg"></a></li>

  <li data-id="id-11" class="web"><a href="" target="_blank"><img src="images/website-dropdown-nav-menu.png" class="portimg"></a></li>

  <li data-id="id-12" class="web"><a href="" target="_blank"><img src="images/website-restaurant-navigation-icons.png" class="portimg"></a></li>

  <li data-id="id-13" class="ios"><a href="" target="_blank"><img src="images/ios-app-ui-05.png" class="portimg"></a></li>

  <li data-id="id-14" class="web"><a href="" target="_blank"><img src="images/website-footer-layout-design.png" class="portimg"></a></li>

  <li data-id="id-15" class="web"><a href="" target="_blank"><img src="images/website-shop-flowers-navigation.png" class="portimg"></a></li>
</div>

Answer 1

For reference, there were a handful of things wrong with this, but to resolve:

1. We checked for conflicting javascript libraries (original problem site included 1.9, 1.10, and 1.8.3).
2. Since quicksand requires 1.8.3, that was the required library.
3. Updated the CSS class selectors to be li."+sorttype