metafizzy / isotope-packery

packery layout mode for Isotope
42 stars 15 forks source link

Packery with LazyLoad - Uncaught TypeError: obj is not iterable #20

Closed morph3us-net closed 1 year ago

morph3us-net commented 1 year ago

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.

morph3us-net commented 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;
};

});