title: Integrating Isotope with BBQ hash history
body: <p>I know it's a popular question but I'm struggling a little with the tutorial on the <a href="http://isotope.metafizzy.co/index.html" rel="nofollow">Isotope</a> site to develop my current Isotope to use <a href="http://isotope.metafizzy.co/demos/hash-history.html" rel="nofollow">BBQ hash history</a>.</p>
  
  <p>I am essentially trying to add BBQ hash history to my current set up so I can link directly to the filtered content.</p>
  
  <p>This is my jQuery code so far, which works perfectly.</p>
  
  <pre><code>jQuery(function () {
      var $container = jQuery('.wwd-content-container');
      $container.imagesLoaded(function () {
          $container.isotope({
              itemSelector: '.each-wwd-content',
              filter: '.corporate'
          });
      });
      jQuery('.wwd-filters a').click(function () {
          jQuery('a.active-filter').removeClass('active-filter');
          jQuery(this).addClass('active-filter');
          var selector = $(this).attr('data-filter');
          $container.isotope({
              filter: selector
          });
          return false;
      });
  });
  </code></pre>
  
  <p>And I have changed my filter navigation from:</p>
  
  <pre><code>&lt;li&gt;&lt;a href="#" data-filter=".&lt;?php echo esc_attr( $page_class ) ?&gt;"&gt;&lt;?php the_title(); ?&gt;&lt;/a&gt;&lt;/li&gt;
  </code></pre>
  
  <p>to</p>
  
  <pre><code>&lt;li&gt;&lt;a href="#filter=.&lt;?php echo esc_attr( $page_class ) ?&gt;"&gt;&lt;?php the_title(); ?&gt;&lt;/a&gt;&lt;/li&gt;
  </code></pre>
  
  <p>I am using Wordpress hence the $page_class variables etc — but don't spend too much time on that.</p>
  
  <p>Thanks and any help would be most appreciated.
  R</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>This is what I have so far...</p>
  
  <pre><code>jQuery(function () {
      var $container = jQuery('.wwd-content-container');
      $container.imagesLoaded(function () {
          $container.isotope({
              itemSelector: '.each-wwd-content',
              filter: '.corporate'
          });
      });
      jQuery('.wwd-filters a').click(function () {
          jQuery('a.active-filter').removeClass('active-filter');
          jQuery(this).addClass('active-filter');
          var selector = $(this).attr('data-filter');
          $container.isotope({
              filter: selector
          });
          return false;
      });
      jQuery('.wwd-filters a').click(function(){
            // get href attr, remove leading #
        var href = jQuery(this).attr('href').replace( /^#/, '' ),
            // convert href into object
            // i.e. 'filter=.inner-transition' -&gt; { filter: '.inner-transition' }
            option = $.deparam( href, true );
        // set hash, triggers hashchange on window
        $.bbq.pushState( option );
        return false;
      });
      jQuery(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');
  });
  </code></pre>