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;
});
});