Help with my isotope.js filterable portfolio
<p>I'm creating a filterable portfolio template for a WordPress theme I'm developing using Isotope.js, but I cant seem to get it working correctly and I'm not all to sure why.</p>

<p>Here is the code for the page template:</p>

<pre><code>&lt;?php
/*
Template Name: Portfolio Filter
*/
?&gt;
&lt;?php get_header(); ?&gt;
&lt;div id="content" class="clearfix"&gt;
&lt;div id="main" class="col940 left first clearfix" role="main"&gt;

    &lt;header&gt;

        &lt;h1 id="port-title"&gt;&lt;?php the_title(); ?&gt;&lt;/h1&gt;

    &lt;/header&gt; &lt;!-- end article header --&gt;


                &lt;?php if(get_post_meta(get_the_ID(), 'page_intro', true) != '') : ?&gt;
                &lt;div id="port-single-intro"&gt;
                    &lt;h3&gt;&lt;?php echo get_post_meta(get_the_ID(), 'page_intro', true); ?&gt;&lt;/h3&gt;
                    &lt;hr /&gt;
                &lt;/div&gt;
                &lt;?php endif; ?&gt;



        &lt;script type='text/javascript'&gt;         
            $(document).ready(function () {

//Set your isotope area
var $container = $('#portfolio-wrap'),
filters = {};

//Set our items to be filtered, .post will work if you're using the post_class(); function
$container.isotope({
    itemSelector : '.portfolio-item',
    layoutMode : 'masonry',

});

//Set the buttons to filter the content
$('.filter a').click(function(){
    var $this = $(this);
    // don't proceed if already selected
    if ( $this.hasClass('selected') ) {
    return;
}

var $optionSet = $this.parents('.option-set');
//change selected class
$optionSet.find('.selected').removeClass('selected');
$this.addClass('selected');

//store filter value in object
//i.e. filters.color = 'red'
var group = $optionSet.attr('data-filter-group');
filters[ group ] = $this.attr('data-filter-value');

//convert object into array
var isoFilters = [];
for ( var prop in filters ) {
isoFilters.push( filters[ prop ] )
}
var selector = isoFilters.join('');
$container.isotope({ filter: selector });

return false;
});

});
    &lt;/script&gt;

    &lt;script&gt;

    &lt;/script&gt;

    &lt;!-- Portfolio Filter --&gt;
    &lt;h2&gt;Catagories&lt;/h2&gt; 
    &lt;ul class="filter" data-filter-group="catagories"&gt;
        &lt;li&gt;&lt;a href="#filter-topic-any" data-filter-value="" class="selected"&gt;All&lt;/a&gt;&lt;/li&gt;
        &lt;?php
            //Grab the child categories
            $categories=get_categories('portfolio');
                    foreach($categories as $category) {
                //and format them for use as isotope filters
                echo '&lt;li&gt;&lt;a href="#filter-topic-' . $category-&gt;slug . '" class="" data-filter-value=".category-' . $category-&gt;slug . '" ' . '&gt;' . $category-&gt;name . '&lt;/a&gt;&lt;/li&gt;';
            } 
        ?&gt;
    &lt;/ul&gt;

    &lt;div id="portfolio-wrap"&gt;           
        &lt;?php 
            $loop = new WP_Query(array('post_type' =&gt; 'portfolio')); 
        ?&gt;
        &lt;?php while ( $loop-&gt;have_posts() ) : $loop-&gt;the_post(); ?&gt;
        &lt;?php   
            $custom = get_post_custom($post-&gt;ID);
            ?&gt;


        &lt;div class="portfolio-item"&gt;
            &lt;div class="view view-sixth"&gt;
                &lt;?php the_post_thumbnail( 'gframe-thumb-port' ); ?&gt;
                    &lt;div class="mask"&gt;
                            &lt;h2&gt;&lt;a href="&lt;?php the_permalink() ?&gt;" rel="bookmark" title="&lt;?php the_title_attribute(); ?&gt;"&gt;&lt;?php the_title(); ?&gt;&lt;/a&gt;&lt;/h2&gt;
                            &lt;p&gt;&lt;a href="&lt;?php the_permalink() ?&gt;"&gt;View&lt;/a&gt;&lt;/p&gt;
                    &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;?php endwhile; ?&gt;  
    &lt;/div&gt;
&lt;/div&gt;  
&lt;/div&gt;
&lt;?php get_footer(); ?&gt;
</code></pre>

<p>Please note that the jQuery in the code will be loaded separate, I've included it there for ease just now.</p>

<p>You can view live what is happening at <a href="http://themes.i-am-grae.me/studio8" rel="nofollow">http://themes.i-am-grae.me/studio8</a>.</p>

<p>Basically it will only show one portfolio entry at a time, does anyone see anything stand out that would fix this? </p>

<p>Kind Regards</p>

<p>Graeme</p>
