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 ?
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 ?