Isotope Filter BBQ Hash

Question

Trying desperately to set up Isotope with BBQ Hash and failing. Already spent time with the demo: http://isotope.metafizzy.co/tests/combo-sort-history.html and still not getting it.

My code below is currently working to filter my items...just can't get the hash setup. I need this so I can link directly to one of my filter links. Any help will be great. Having trouble integrating it into what I already have so please keep that in mind...

<script>
    var $container = $('.container');
    $(window).load(function() {
         $('.container').isotope({
            itemSelector : '.item',
            isFitWidth: true,
            // sortBy : 'random',
        });

        $('.filter a').click(function(){
          var selector = $(this).attr('data-filter');
          $container.isotope({ filter: selector });
          return false;
        });


    });

      $(window).load()
  </script>

Jacob Raccuia · Answer 1 · 2013-07-12T14:49:39.567

I am apparently not allowed to link to the Isotope BBQ site, but if you go to Isotopes site and select Hash History with Jquery BBQ, you can see what I'm posting below.

When I attempted to install this a few days ago, I was able to get it to work pretty quickly. Of course, the first step to this is to include the BBQ Hash jquery.

I changed the URL's to represent the HASH requests better. Instead of using:

<a href="#" data-filter=".television">

I used:

<a href="#filter=.television">

For help with figuring out the fitler type, you can use print or log$.param({ filter: ':not(.transition)' }) to tell you what it should look like.

Then I included this in the jQuery. This part would replace the click function in your code.

$('.filter a').click(function(){
  // get href attr, remove leading #
  var href = $(this).attr('href').replace( /^#/, '' ),
  // convert href into object
  // i.e. 'filter=.inner-transition' -> { filter: '.inner-transition' }
  option = $.deparam( href, true );
  // set hash, triggers hashchange on window
  $.bbq.pushState( option );
  return false;
});

and finally, this code is the new filter. I would put this inside the window.load function, BELOW everything inside that function. First you want to set your options.

$(window).bind( 'hashchange', function( event ){
     // get options object from hash
 var hashOptions = $.deparam.fragment();
     // apply options from hash
 $container.isotope( hashOptions );
 })
    // trigger hashchange to capture any hash data on init
.trigger('hashchange');

By replacing your code above with what I have listed here and changing your <a> filter list, you should be able to get it to work no problem. I have, however, just listed out what was included on isotope since it worked for me! Let me know if you have trouble.

Isotope Filter BBQ Hash

1 Answers1