Jquery Isotope and wordpress, filtering troubles

1
votes

Ive been trying to get isotope filtering working.. Im new to jquery/javascript but wanted to get isotope working on a clients site.. I have been all over stack and the internet looking to see what im doing wrong or missing.. I am using this in a wordpress theme as well and thought that might havce been part of my issue, but after following every tutorial and example I could find I think its a small oversight on my part hopefully

here's my jsfiddle.. http://jsfiddle.net/CNj95/1/

Heres filter UL

<ul id="filters" class="option-set clearfix" data-option-key="filter">
  <li><a href="#" data-option-value=".category-instagram">instagram</a></li>
  <li><a href="#" data-option-value=".category-tweets">tweets</a></li>
  <li><a href="#" data-option-value=".category-facebook">facebook</a></li>
  <li><a href="#" data-option-value=".category-youtube">youtube</a></li>
</ul>

Here are examples of Items to be filtered

<div id="content">
  <div class="category-tweets boxy"><div class="soc-label" ></div>
      <a href="" rel="prettyphoto"  title="" ></a>                      
       <p>CONTENT</p>
  </div>

  <div class="category-instagram boxy"><div class="soc-label" ></div>   
      <a href="" ><img width="150" height="150" src="" class="attachment-thumbnail wp-post-image" alt="" /></a>                     
       <p>CONTENT</p>
  </div>
</div>

Jquery as is 

jQuery(document).ready(function () {
  var mycontainer = jQuery('#content');
  mycontainer.isotope({
      itemSelector: '.boxy'
  });

  // filter items when filter link is clicked
  jQuery('#options a').click(function (event) {
      var selector = jQuery(this).attr('data-option-value');
      mycontainer.isotope({
          filter: selector
      });
      return false;
  });

});

1
jquerywordpressfilteringjquery-isotope
You know WordPress comes bundled with Masonry? It's like the free version of Isotope. – elclanrs
I did not know that, what I'm looking for though is mainly the filtering.. I have the masonry part working fine – StephenPerrett

1 Answers

0
votes

You selector variable right now just returns a string... not a selector. Easy to fix. Just wrap it in parens and prepend a $:

jQuery('#options a').click(function (event) {
  var selector = jQuery(this).attr('data-option-value');
  mycontainer.isotope({
      filter: $(selector)
  });
  return false;
  });