Question

I use a plugin called quicksand in my wordpress theme this plugin load the post in the choosen category. Now I have added custom taxnomies/ custom field values to every post, and I want to be able to sort my post’s based on them.

Since Im really new to jquery I really don’t know were to start. I understand that my script listens for “link” clicks. I also understand that it checks the class of the link clicked and sends this to my quicksand script for it to determine what to show, and then animate i smoothly.

Here’s the script:

$(document).ready(function(){

// Blur images on mouse over
$(".portfolio a").hover( function(){ 
    $(this).children("img").animate({ opacity: 0.75 }, "fast"); 
}, function(){ 
    $(this).children("img").animate({ opacity: 1.0 }, "slow"); 
}); 

// Clone portfolio items to get a second collection for Quicksand plugin
var $portfolioClone = $(".portfolio").clone();

// Attempt to call Quicksand on every click event handler
$(".filter a").click(function(e){

    $(".filter li").removeClass("current"); 

    // Get the class attribute value of the clicked link
    var $filterClass = $(this).parent().attr("class");

    if ( $filterClass == "all" ) {
        var $filteredPortfolio = $portfolioClone.find("li");
    } else {
        var $filteredPortfolio = $portfolioClone.find("li[data-type~=" + $filterClass + "]");
    }

    // Call quicksand
    $(".portfolio").quicksand( $filteredPortfolio, { 
        duration: 800, 
        easing: 'easeInOutQuad' 
    }, function(){

        // Blur newly cloned portfolio items on mouse over and apply prettyPhoto
        $(".portfolio a").hover( function(){ 
            $(this).children("img").animate({ opacity: 0.75 }, "fast"); 
        }, function(){ 
            $(this).children("img").animate({ opacity: 1.0 }, "slow"); 
        }); 


    });


    $(this).parent().addClass("current");

    // Prevent the browser jump to the link anchor
    e.preventDefault();
})
});

I use this plugin on my wordpress site and i have managed to modify it to show post’s in the right category. How can i make it look for checked checkboxes? This is how my source code looks like.

<!-- //Setting up the args variable -->
<div id="wrap">
<dl class="group">
<dt>Filter:</dt>
<dd>

<!-- Setting up the list id -->
<ul class="filter group">
<!--  Adding all option as it will always be there, theres always an all! -->
<li class="current all"><a href="#">All</a></li>
<!-- Doing the if to dynamicly add all the categories -->

<li class="Stenar"><a href="#">Stenar</a></li>

  <li class="logos"><a href="#">logos</a></li>

  <li class="web"><a href="#">web</a></li>

  <li class="web"><a href="#">web</a></li>


</ul>   
</dd>
   </dl>    

  <ul class="portfolio group">


  <li class="item" data-id="1" data-type="Stenar">
  <a href="http://bugaboodonkey.info/2012/01/utanfor/" rel="prettyPhoto   [portfolio]"><img width="140" height="130" src="http://bugaboodonkey.info/wp-   content/uploads/2012/01/73e3fb17.gif" class="attachment-post-thumbnail wp-post-image"   alt="73e3fb17" title="73e3fb17" /></a>
 <!-- Hämtar custom taxonomy -->
 <!-- Hämtar Customvalue baserat på key -->
 <!-- &nbsp;&nbsp; Pris: -->
 </li>



 <li class="item" data-id="2" data-type="logos">
 <a href="http://bugaboodonkey.info/2012/01/testar-3/" rel="prettyPhoto[portfolio]"><img width="140" height="130" src="http://bugaboodonkey.info/wp-content/uploads/2012/01/73e3fb17.gif" class="attachment-post-thumbnail wp-post-image" alt="73e3fb17" title="73e3fb17" /></a>
 <!-- Hämtar custom taxonomy -->
 <!-- Hämtar Customvalue baserat på key -->
 <!-- &nbsp;&nbsp; Pris: -->
 </li>



 <li class="item" data-id="3" data-type="web">
 <a href="http://bugaboodonkey.info/2012/01/testar-1/" rel="prettyPhoto[portfolio]"><img width="140" height="58" src="http://bugaboodonkey.info/wp-content/uploads/2011/06/bugaboo-donkey1-475x198.jpg" class="attachment-post-thumbnail wp-post-image" alt="Bugaboo Donkey" title="bugaboo donkey" /></a>
 <!-- Hämtar custom taxonomy -->
 <!-- Hämtar Customvalue baserat på key -->
  <!-- &nbsp;&nbsp; Pris: -->
 </li>



 <li class="item" data-id="4" data-type="web">
 <a href="http://bugaboodonkey.info/2012/01/kattsand/" rel="prettyPhoto[portfolio]"><img width="140" height="58" src="http://bugaboodonkey.info/wp-content/uploads/2011/06/bugaboo-donkey1-475x198.jpg" class="attachment-post-thumbnail wp-post-image" alt="Bugaboo Donkey" title="bugaboo donkey" /></a>
 <!-- Hämtar custom taxonomy -->
 <!-- Hämtar Customvalue baserat på key -->
 <!-- &nbsp;&nbsp; Pris: -->
 </li>



 </ul>

  <!--
<li data-id="id-1" data-type="hannah">
    <a href="images/hannah_yg.jpg" rel="prettyPhoto[portfolio]">
      <img src="images/hannah_yg_thumb.jpg" />
    </a>
  </li>

  -->

  </div>

Answer 1

What about this?

add this script to yours

$("ul li input[type='radio']").live('click', function() {
    $(".filter li." + $(this).attr('value') + " a").click();
})

also add this html to test

<ul>
    <li><input type="radio" name="filter" value="all" checked /></li>
    <li><input type="radio" name="filter" value="Stenar" /></li>
    <li><input type="radio" name="filter" /></li>
    <li><input type="radio"r name="filter" value="web" /></li>
</ul> 

This is a jsfiddle if you want to check
http://jsfiddle.net/sabri/Hy2MQ/