Filtering Isotope from URL

Question

Im trying to filter my isotope page from a url link, have searched and tried to implement examples found on here, but to no avail.

Here is the isotope page: http://www.dotsdesign.tv/ipltest/rs-case-studies-grid.php

And here is the page I am trying to filter from: http://www.dotsdesign.tv/ipltest/rs-mobile-plinth.php

I have tried all variations of the data-filter, # and ? but nothing seems to filter the results.

Any ideas?

Answer 1

This solution is work 100%

For example
if you want pass filter category from diffrent page then write as below http://www.dotsdesign.tv/ipltest/rs-mobile-plinth.php#infographic

on isotope this page http://www.dotsdesign.tv/ipltest/rs-case-studies-grid.php

 <ul class="filters">
    <li class="filter selected"><a href="#" data-filter="*">All</a></li><br>
    <li class="filter"><a href="#" data-filter=".isotope-category-
    infographic">Infographic</a></li>
    <li class="filter"><a href="#" data-filter=".isotope-category-
    motiongraphic">Motion graphic</a></li>
</ul>

<ul id="portfolio" class="masonry-grid ">
    <li class="masonry-grid-item isotope-category-infographic">infographic 
    data</li>
    <li masonry-grid-item isotope-category-motiongraphic>motion graphic 
    data</li>
</ul>

Now write below code in jquery:

$(window).load(function(){
    var hashID = window.location.hash.substring(1);

    /*$container is an isotope container.it may be different
    a container is a wrapper for filter data
    here is masonry-grid is a container*/

    $container.isotope({ filter: ".isotope-category-"+hashID });

    /*other filter selected logic you can apply to your HTML structure here*/

});

Answer 2

Isotope won't do that natively, you have to find yourself a solution. Filter method from native API can help you, but you have to provide

For example, if you want to filter elements that owns a class like "cold"

1. You could create a page that accepts a parameter named filter - for example: http://www.yourdomain.com/page.html?filter=cold

2. You have to intercept the querystring from Javascript, using a simple function found here and store it in a querystringValue variable.

   var querystringValue = getParameterByName('filter');

3. Once Isotope is loaded and ready - with all elements, each one holding its own filter class - you can use the filter method to filter by the querystring you received. I will presume $grid contains a reference to the grid object.

   $grid.isotope({ filter: querystringValue });

This is just one of the possibilities, but it works. You should of course to code a mechanism to handle querystring parameters that are not valid possible filters.

Hope you find this useful.