Link to Isotope page using a hash and filter on load

JavaScript
,
1

Hello.

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: https://www.boringbank.com/solutions#credit-cards 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');

//$items.hide();

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

  $container.isotope({
    sortBy : 'original-order',
    //layoutMode: 'fitRows',
    //itemSelector: '.revGallery-anchor',
    stagger: 30,
    masonry: {
      //columnWidth: 110,
      gutterWidth: 10
    }
  });
//});

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

// Light box
$('.list-container-item--wrap').magnificPopup({
  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>' +
    '</div>'+
    '</div>'
  },
  delegate: 'a',
  type: 'image',
  removalDelay: 500,
  callbacks: {
    beforeOpen: function() {
      this.st.image.markup = this.st.image.markup.replace('mfp-figure', 'mfp-figure mfp-with-anim');
      this.st.mainClass = this.st.el.attr('data-effect');
    }
  },
  midClick: true,
  /*gallery: {
    enabled:true
  }*/
});
2

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: https://isotope.metafizzy.co/filtering.html

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

3

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