Attempting to create an image grid about mixitup HOT 2 CLOSED

Hi there,

I'm guessing you got this from the Columbia Club site? This method of image loading has nothing to do with MixItUp, so please know it's not necessary for the plugin to work. It is however a nice way to integrate lazy image loading with MixItUp.

This way, we only load images when MixItUp filters in elements, and not on page load. Since we have hundreds of images on the page, we don't want to load them all at once and slow down the page load.

You're missing the part of the code that handles the data-src/src transfer:

$('#YourGridID').mixitup({
    onMixLoad: function(config){
        lazyLoad(config);
    },
    onMixEnd: function(config){
        lazyLoad(config);
    }
});

It's a function called lazyLoad() that I'm calling using the above callbacks, and it looks like this:

function lazyLoad(config){
    $('#YourGridID').find('.'+config.filter).each(function(){
        var $t = $(this),
        src = $t.find('img').attr('data-src');
        if(typeof $t.find('img').attr('src') !== 'undefined'){
            $t.find('img').attr('src',src);
        };
    });
};

After the data-src url is transfered to the src attribute, the image then loads as normal, and fires the onload function when it's done. This fades in the image by adding the .loaded class to the img_wrapper. You should be aware that if you are loading 'all' elements on load, or multiple filters, this code won't work, I just knocked it up for that specific project and it should not be considered a one size fits all solution.

Hope this helps. If you're not building something with lots and lots of images on the page though, there's no need to use this method.

from mixitup.

Ok thanks for the clear explanation. I was actually just trying to get a basic image grid to work but after much experimentation, I am making a little headway but it's tricky for responsive as you have to think in multi-dimensional terms. I've tried Masonry, Isotope and Packery but did not have much luck with those in terms of using images. I think your script will get me where I need to be I hope. Looking at your client portfolio is awe inspiring. Thanks.

from mixitup.