Isotope & Webflow

Hi all,

I just got a new client !
It is a website redesign of a swiss theater… they have man events and I’m trying to figure out how i could deliver the best UX / UI experience… I need to categorize, sort things out. I’ve heard about Isotope and its filters features… I’ve followed a tutorial in russian (!) on youtube, did I think everything the guy did but for some reason can not get the expected result.

My question is: is Isotope still supported by Webflow ? Am i doing something wrong ?

My read-only website: https://preview.webflow.com/preview/thl-sierre?preview=6535a9412bb1b050ca1b549ee2d1db3e

The tutorial I followed on youtube: - YouTube

Thank you so much for your help ! :slight_smile:
Anthony

I know about that isotope webflow project, but it seems we cannot see the JS custom code he used in his read-only project…

http://isotope.webflow.io/
https://preview.webflow.com/preview/isotope?preview=a90bef3e1e720b1e0f8d982ae51ebec4

It seems my structure looks pretty similar, can’t find what I’m doing wrong :frowning:

Here’s the custom code you’re looking for. It was probably done in Site Footer Code, which is why you couldn’t see it in the share link.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.2/isotope.pkgd.min.js"></script>
<script src=https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.1.8/imagesloaded.pkgd.min.js></script>

<script>
$(document).ready( function() {
  // init Isotope
  var $grid = $('.grid').isotope({
    itemSelector: '.item'
  });
  
  // layout Isotope after each image loads
  $grid.imagesLoaded().progress( function() {
    $grid.isotope('layout');
  }); 

  // store filter for each group
  var filters = {};

  $('.filters').on( 'click', '.button', function() {
    var $this = $(this);
    // get group key
    var $buttonGroup = $this.parents('.button-group');
    var filterGroup = $buttonGroup.attr('data-filter-group');
    // set filter for group
    filters[ filterGroup ] = $this.attr('data-filter');
    // combine filters
    var filterValue = concatValues( filters );
    // set filter for Isotope
    $grid.isotope({ filter: filterValue });
  });

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

// flatten object by concatting values
function concatValues( obj ) {
  var value = '';
  for ( var prop in obj ) {
    value += obj[ prop ];
  }
  return value;
}
</script>

Thank you for the code !
I tried to implement it but it seems it still doesn’t work.
I’ve checked the classes, custom attribute, element selector but it still doesn’t want to filter.

I’ve read the documentation of isotope on its website and I tried to write this code: obviously I’m not a programmer, I’m probably missing something ?

Here the read-only link: https://preview.webflow.com/preview/thl-sierre?preview=6535a9412bb1b050ca1b549ee2d1db3e

EDIT: my code doesn’t appear on my post, how did you embed yours in your last reply ? :slight_smile:

<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>

<script>

// init Isotope
var $grid = $('.grid').isotope({
  itemSelector: '.element-item',
  layoutMode: 'masonry',  
});

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

// show blue items
$grid.isotope({ filter: '.blue' });

// show green items
$grid.isotope({ filter: '.green' });

// show all items
$grid.isotope({ filter: '*' });

</script>

Indent code with the code format button… or manually add 4 spaces to each line.

1 Like

I will use the Indent code with the code format button then :slight_smile: thank you !
Does my code kind of makes sense ?

I had a look on the isotope filtering method and tried to replicate what I read:

Still can’t find the mistake.

Okay, here is my latest try with the javascript code, still missing something though.
Any Idea ?

// external link to the packaged isotope

<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>

<script>

// init Isotope

var $grid = $('.grid').isotope({
itemSelector: '.grid-item',
layoutMode: 'masonry',  
});

// filter items on button click

$('.filter-button-group').on( 'click', 'button', function() {
var filterValue = $(this).attr('data-filter');
$grid.isotope({ filter: filterValue });
});

</script>

My shared read-only link: https://preview.webflow.com/preview/thl-sierre?preview=6535a9412bb1b050ca1b549ee2d1db3e