Link to Isotope page using a hash and filter on load


I want to be able to link to a page that uses isotope.min.js filter using a hash URL and have the results filtered on load.

I am currently using (on the specific page):
– Isotope to filter and display the listings
– and magnificPopup to render the listings in a lightbox on click.

The above is working. I just need assistance with the hash URLs and using them to filter.
E.g. I want to be able to get to: and have the isotope filter and display only “credit cards” on the provided URL.

Any point in the right direction will be appreciated.

Here’s current script without the URL filter:

// Results 
var $container = $('.list-container-item--wrap'); 
var $items = $('.item');


//  background: true
//}, function() {
//  $boxes.fadeIn();

    sortBy : 'original-order',
    //layoutMode: 'fitRows',
    //itemSelector: '.revGallery-anchor',
    stagger: 30,
    masonry: {
      //columnWidth: 110,
      gutterWidth: 10

$('ul.listing-cats li a').on( 'click', function(e) {
  var filterValue = $(this).attr('data-filter');
  $('.list-container-item--wrap').isotope({ filter: filterValue });
    selector: filterValue.replace('*','')

// Light box
  image: {
    markup: '<div class="mfp-figure">' +
    '<div class="mfp-toolbar"></div>' +
    '<div class="mfp-close"></div>' +
    '<div class="product-container">'+
    '<figure>' +
    '<div class="mfp-img"></div>' +
    '<figcaption>' +
    '<div class="mfp-bottom-bar">' +
    '<div class="mfp-title"></div>' +
    '<div class="mfp-counter"></div>' +
    '</div>' +
    '</figcaption>' +
    '</figure>' +
  delegate: 'a',
  type: 'image',
  removalDelay: 500,
  callbacks: {
    beforeOpen: function() { ='mfp-figure', 'mfp-figure mfp-with-anim'); ='data-effect');
  midClick: true,
  /*gallery: {

Isotope is obviously subloading jQuery too, based on these lines:

the value ‘credit-cards’ can be accessed as window.location.hash (specifically, it will come in as #credit-cards, so you’ll probably have to do some string manipulation there.)

This page seems to reference what you can do to filter Isotope.js:

Give it a try, see what you come up with.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.