recalculate not working for me with dynamic images

[naglalakk]

Hi and thank you for this fine lightweight masonry plugin. I'm wondering if I'm doing something wrong with the recalculate function. My scenario is this: I have to display 12 thumbnails at a given time. In this container I have a left and a right arrow so user can slide to the next 12 thumbnails. I do this by initially hiding all items and then feeding them to the macy container depending on which index the user is on. However when I add items to the macy container dynamically I get random height. I've tried all options recalculate(), recalculate(true), recalculate(true, true) but it doesn't seem to work. Any ideas on what I might be doing wrong?

the code

Initial load

    $('.media-grid').append($('.media-layer-1').children().clone())
    this.instance.recalculate(true)

This function handles sliding between

slideTransition() {
    // Empty media-grid
    $('.media-grid').empty()
    // Add media-layer-i
    $('.media-grid').append(
        $(`.media-layer-${this.slideIndex}`).children().clone()
    )
    this.instance.recalculate(true)
}

Image of how it appears https://ibb.co/mo1dpe

[jrmd]

Hi @naglalakk,

Sorry to see you're having issues; however i believe this could be an issue with the recalculate happening before the images have loaded. As a potential solution, you could try doing a reInit as this should run the images loaded code.

So in your slideTransition function try replacing this.instance.recalculate(true) with this.instance.reInit().

Let me know if this resolves the issue!

[naglalakk]

Hi @jrmd thank you for a quick response. You were absolutely right it was because the images were not loaded. reInit did not work for me but I used

this.instance.runOnImageLoad(function() {
    // here I call recalculate
    self.instance.recalculate(true)
})

Thanks again for your help and your good library. I will close this issue now :)

[jrmd]

@naglalakk Great stuff! Glad you like the library.