Isotope pre-filtering triggered by link in another page

Question

I am using Isotope to display an image grid of design projects thumbnails, sorted by product category (lifestyle, car accessories, electronics, etc.) on my home page. I am using <li> items to filter the thumbnails.

I would like those <li> items to act as hyperlinks to my home page from every other page of my website and pre-filter the home page isotope grid when clicked.

I've looked up this answer and this one but none of them worked for me. Could anyone be of some help?

Here is what I have so far (adapted from the first link above) :

JS:

var $container = $('.grid');

$container.isotope({
// options
isInitLayout: true,
});

    // filter items on button click
    $('#filter').on( 'click', 'li', function() {
      var filterValue = $(this).attr('data-filter');
      $container.isotope({ filter: filterValue });
    });

  // change is-checked class on buttons
  $('#filter').each( function( i, buttonGroup ) {
    var $buttonGroup = $( buttonGroup );
    $buttonGroup.on( 'click', 'li', function() {
      $buttonGroup.find('.is-checked').removeClass('is-checked');
      $( this ).addClass('is-checked');
    });
});

var filterFromQuerystring = getParameterByName('filter');
$('#filter li a[data-filter=".' + filterFromQuerystring  + '"]').click();

    });

});

Filter nav as seen on the home page:

<ul id="filter">
  <li class="is-checked" data-filter="*">All</li>
  <li data-filter=".lifestyle">Lifestyle</li>
  <li data-filter=".car">Car accessories</li>
  <li data-filter=".lighting">Lighting</li>
  <li data-filter=".digital">Digital</li>
  <li data-filter=".bnc">Beauty & Care</li>
  <li data-filter=".equipment">Equipment</li>
</ul>

Filter nav as seen on any page but the home page:

<ul id="filter">
  <li><a href="index.html" data-filter="*">All</a></li>
  <li><a href="index.html?filter=lifestyle" data-filter=".lifestyle">Lifestyle</a></li>
  <li><a href="index.html?filter=car" data-filter=".car">Car accessories</a></li>
  <li><a href="index.html?filter=lighting" data-filter=".lighting">Lighting</a></li>
  <li><a href="index.html?filter=digital" data-filter=".digital">Digital</a></li>
  <li><a href="index.html?filter=bnc" data-filter=".bnc">Beauty & Care</a></li>
  <li><a href="index.html?filter=equipment" data-filter=".equipment">Equipment</a></li>
</ul>

Image grid as seen on the home page:

<ul class="grid">
  <li class="lifestyle"><a href="gallery1.html"><img src="images/thumbs/1.jpg" /></a></li>
  <li class="lifestyle"><a href="gallery2"><img src="images/thumbs/2.jpg" /></a></li>
  <li class="lighting"><a href="gallery3.html"><img src="images/thumbs/3.jpg" /></a></li>
[...]
</ul>

I hope everything makes sense, looking forward to hearing from you!

Thank you!

Isotope pre-filtering triggered by link in another page

0 Answers0