Packery + ajax loaded content + relayout packery

3 Views

I am creating a layout with the Packery library from Metafizzy where i list post titles and thumbnails. Once these are clicked, I am hiding the initial content, and then ajax load the rest of the post to replace that initial content.

I am looking for tips on how I would then relayout packery as I can’t get it to work properly. Perhaps my ajax function needs to be different for it to work. The ajax load works, but there is an overlapping issue in packery.

Read More
 $(".modlink").click(function(){
        $(this).find('div.block:first').toggleClass("hidden");
        var post_link = $(this).attr("rel");
        $(this).find('article').toggleClass("d").fadeIn();
        $(this).find('div.hiddengems').toggleClass("showing");
        $(this).find('div.hiddengems').load(post_link); 
        $container.packery('layout');
    return false;
});

Anyways. I am up for any tips & tricks about ajax + packery.

Examples of sites using this effect.
http://www.prohelvetia.ch/mobile
http://www.typetoken.net/ (Though this one is only adding, not removing initial content)

Post Views: 3

Related posts

Leave a Reply

2 comments

  1. Sounds like packery is trying to build the grid before all of the images have loaded. Try using ImagesLoaded.js. It’s made by MetaFizzy and designed to be used with packery.

    http://imagesloaded.desandro.com/

    Also, I would try something like this to load and append the new element:

    function appendPackeryElement() {
    $.ajax({
      method: "GET",
      url: "/theurl/"
    })
    .done(function( data ) {
        var $container = $('.your-packery-container');
        $container.packery( 'fit', data ).fadeIn();
    });
}

  2. macksol is exactly right: the issue is that the images are not loading in time and to fix this, we can use Metafizzy’s own imagesLoaded js: https://imagesloaded.desandro.com

    I could not, however, use the script as macksol presented it.

    Here is my working javascript call:

    <script type='text/javascript'>
    $('.grid').imagesLoaded( function(){
        $('.grid').packery({
            itemSelector:'.grid-item', // these options should be modified for your layout
            percentPosition:true, // these options should be modified for your layout
            gutter:5 // these options should be modified for your layout
        });
    });
</script>

    Good luck, and all the best!