Closed morph3us-net closed 1 year ago
So I had a lot of things messed up. Main thing was that I used packery, instead of isotope-packery. I also changed the library I use for lazy loading to "lozad" now everything works fine! Sorry for the confusion!
Here's my code, maybe this helps someone in the future. As a "cherry on top" it also contains the code for using multiple filters simultaneously. jQuery(function ($) { // initialize Packery var $pckry = $('.isotope-list').isotope({ layoutMode: 'packery', filter: '*', itemSelector: '.isotope-item', packery: { gutter: 0 }, animationOptions: { duration: 750, easing: 'linear', queue: false } });
// layout on first page load, so that the gutter gets set up
$(window).on('load', function () {
$pckry.isotope('layout');
});
// filter items on button click
$('.filters li').click(function () {
$('.filters li').removeClass('current');
$(this).addClass('current');
var combinedFilter = getFilter($('.filters li.current').attr('data-filter')) + getFilter($('input[name="isotope-type-filter"]:checked').val().toLowerCase());
$pckry.isotope({ filter: combinedFilter });
$pckry.isotope('layout');
});
// filter items on radio button change
$('input[name="isotope-type-filter"]').change(function () {
var combinedFilter = getFilter($('.filters li.current').attr('data-filter')) + getFilter($('input[name="isotope-type-filter"]:checked').val().toLowerCase());
$pckry.isotope({ filter: combinedFilter });
$pckry.isotope('layout');
});
function getFilter(buttonGroup) {
var filterValue = '';
if (buttonGroup === '*') {
filterValue = "";
} else {
filterValue = "." + buttonGroup;
}
return filterValue;
};
});
I am trying to get packery mode to work with lazy loading, but the solution in the documentation is throwing an error for me. I am not an experienced web developer, so I guess the problem is trivial, but I can not find out what I am doing wrong. I tried to get help over on stackoverflow, but nobody answered, so I am turning here. I have tried to give as much context as possible here: https://stackoverflow.com/questions/74658156/isotope-packery-with-lazyload-js-and-tags
Could somebody please help me understand this? I would greatly appreciate it! If I can add anything, please tell me and I will provide any neccessary info.