jQuery Isotope Filter from Different Page Wordpres

I'm trying to filter from an entirely different page, to where my Isotope is.

Currently, I am calling isotope sucessfully with:

 $(function() {
    // cache container
    var $container = $('.isotope-container');
    var $defaultfilter = $('.feature-this');
    $('.isotope-container').isotope({
      filter: '.feature-this',
      masonry: { columnWidth: 326, resizesContainer: false }
    });

    // filter items when filter link is clicked
    $('#filters a').click(function(){
      var selector = $(this).attr('data-filter');
      $container.isotope({ filter: selector });
      return false;
    });
    // set selected menu items
   var $optionSets = $('.option-set'),
       $optionLinks = $optionSets.find('a');

       $optionLinks.click(function(){
          var $this = $(this);
    // don't proceed if already selected
    if ( $this.hasClass('selected') ) {
        return false;
    }
   var $optionSet = $this.parents('.option-set');
   $optionSet.find('.selected').removeClass('selected');
   $this.addClass('selected'); 
  });
});

I would like to, from another page, filter results when a link is clicked, with a markup like:

    <ul>
        <li><a href="/isotope/#filter=.filter1">Filter 1</a></li>
        <li><a href="/isotope/#filter=.filter2">Filter 2</a></li>
        <li><a href="/isotope/#filter=.filter3">Filter 3</a></li>
        <li><a href="/isotope/#filter=.filter4">Filter 4</a></li>
        <li><a href="/isotope/#filter=.filter5">Filter 5</a></li>
    </ul>

I can't get it to work. It works as desired here, but not from a different page:

http://isotope.metafizzy.co/demos/hash-history.html

I've got just the answer for you - I wrote a blog post about it;

Isotope Filtering from different Wordpress Page

Just for link rot etc I'll copy it out here. I used the jQuery cookie plugin and created and destroyed a cookie which passed over the filter to the page containing Isotope. In my case there was a permanent main menu of filters on each page in header.php. However, I used this code to give the menu a different class depending on whether the user was on the home page (which had the Isotope on it) or another page;

<?php

if (is_front_page()) {
   echo '<ul id="filters">';
} else {
   echo '<ul id="cookiefilter">';
}

?>

Then the Javascript was changed so that if the link being clicked was part of cookiefilter menu (ie off the Isotope page) then the #cookiefilter a click event was fired and a cookie created. The code block below that filters Isotope based on the cookie and then destroys it. The site it's on is;

http://www.face-educationmarketing.co.uk

To see it in action an explanation. The home page has Isotope on it and all the entries underneath the 'Work' header are Isotope filters. The 'About' header is a WP menu, click on one of those links under 'About' and you are taken to different WP page. On that page you would examine the change in the markup on the Work filter list - the ul class has changed, it is now;

<ul class="cookiefilter">

rather than;

<ul class="filters">

This is the important bit because in the JS below, a click event on #filters a behaves differently to click events on #cookiefilter a

In the latter case a cookie is created with the filter name in it. The onload JS checks to see if such a cookie exists, if it does then it calls Isotope, filters it with the value in the cookie and then destroys the cookie so the normal filters then work. Here's the JS;

    // filter items when filter link is clicked
    $('#filters a').click(function(){
        var selector = $(this).attr('data-filter');
        $container.isotope({ filter: selector });
        return false;
    });

    // Set cookie based on filter selector
    $('#cookiefilter a').click(function(){
        var selector = $(this).attr('data-filter');
        $.cookie("listfilter", selector, { path: '/' });
    });

    if ( $.cookie("listfilter") ) {
        $container.isotope({ filter: $.cookie("listfilter") });
        $.cookie("listfilter", null, { path: '/' });
        return false;
    }

Adding an 'Active' class to the link

Some more info based on the comments. A good question, how would you add a class to the active filter so that you can apply CSS to show the user that filter is active?

I've done that on my own homepage (http://www.mcnab.co) using the following JS. Have a look at the Magento, Wordpress, Joomla section on the right hand side of the masthead. Those are Isotope filters.

This script clears all classes from the links contained in the unordered list with id filters when a link is pressed and adds the class 'active' to the clicked link before refiring Isotope;

    var $filterlist = $('ul#filters');
    // filter items when filter link is clicked
    $('#filters a').click(function(){
        $this = $(this);

        var selector = $(this).attr('data-filter');

        // Remove classes from all filters
        $filterlist.find('a').each(function(){
            $(this).removeClass();
        }); 

        // add active class to clicked filter
        $this.addClass('active');

        // refire isotope using the newly clicked filter
        $container.isotope({ filter: selector });
        return false;
    });

To do this from another page you would add a similar script to the #cookiefilter a which found the link with the date-filter attribute with the same as the cookie and add the 'active' class to that.