Isotope Filtering in Jquery

Question

I am trying to create filter in J query and the following code works. Howver I would like to to implement this to work with isotopic filtering.

HTML:

    <div class="tags">
    <label><input type="checkbox" rel="flower" /> Flower </label>
    <label><input type="checkbox" rel="plants" /> Plants</label>
    <label><input type="checkbox" rel="beach" /> Beach </label>

  </div>

 <div class="photo plants flower " style="width:px; height:px;">
 Image 1            
 </div>
<div class="photo flower beach " style="width:px; height:px;">
 Image 2            
</div>

jQuery:

  $(function(){
    $('div.tags').delegate('input:checkbox', 'change', function() {
        var $lis = $('.photo').hide();
        //For each one checked 
        $('input:checked').each(function() {
                $lis.filter('.' + $(this).attr('rel')).show();
        });
    });
});

I can't get the isotope filtering to work.

Here is the fiddle.

Answer 1

I don't know if I understand correctly your question and if this will help you

But this might be a solution Fiddle

   <script type="text/javascript">
$(document).ready(function(){
  var $container = $('#container')
  var $checkboxes = $('div.tags input')
  $container.isotope({itemSelector: '.item'});
  $checkboxes.change(function(){
    var arr = [];
    $checkboxes.filter(':checked').each(function(){
      arr.push( this.value );
    });
    arr = arr.join(', ');
    $container.isotope({ filter: arr });
  });

});
</script>

If this solution does not suit your needs, i apologize for making you lose time.