12

I'm attempting to tile multiple Instagram embeds with Masonry. Problem is the instagram embeds change sizes after loading so the layout leaves gaps.

Is there a callback that i can use when all instagram embeds on the page have loaded? I'm thinking i should trigger masonry again after the Instagram embeds have loaded and resized properly

tried $(document).ajaxStop() didn't work

Jake
  • 115
  • 1
  • 3
  • 15
George Ananda Eman
  • 3,137
  • 6
  • 26
  • 29
  • why don't you load it first from instagram then render the `Masonry`? – aswzen May 25 '15 at 07:24
  • Are you hard-coding those embeds? Do they obey any rule of choosing (last pics of some hashtag, last pics of specific user)? It sounds to me that you should make a request to the Instagram API, get all the photos at the same time and create your own html with the response (json). But this method depends on how are you selecting the photos. – Léo Muniz May 26 '15 at 00:41
  • @aswzen yes that's exactly what i'm trying to do, care to elaborate on how to achieve that? What happens now is when the page loads the instagram embeds are loaded partially (in text form), and then iam assuming it makes ajax calls to load the image and stylesheets for the iframe. I need a way to know that the embeds have finished loading properly so i can trigger masonry – George Ananda Eman May 26 '15 at 03:11
  • @LéoMuniz I'm currently embedding by copying the embed code into a new post (via the wordpress TinyMCE editor on the text tab), i have several of these each as a separate post – George Ananda Eman May 26 '15 at 03:12
  • I've deleted my answer because i miss understand the question. – ecarrizo May 28 '15 at 17:26
  • I think that my answer was partially responding that you need, you can create promises and once all the promises resolved execute your code. but, i cannot create a real answer for you if cant verify how te embeds will work, have an example? – ecarrizo May 28 '15 at 17:28

2 Answers2

5

I had an issue dealing with resizing due to AJAX requests when I was using the Twitter Javascript Embed code. I resolved this by using the following code:

$('#div').bind("DOMSubtreeModified", function() {
    // ...
});

This code will execute when elements are modified under a div element with an id of div. This was very useful. If you need more assistance, don't be afraid to comment on this answer.

Sam Weaver
  • 816
  • 12
  • 23
  • 1
    Works wonderfully with Instagram too.. I used it to get the final height of the div, but it was returning the old height, so I used `window.setTimeout('function()',50);` and now it works great – Khaled Dec 04 '15 at 14:43
2

There's a solution by Daniel Buchner you can use to detect (event callback) element resize. You can wrap each embed in an element (<div>) and attach the resize listener to your div. Whenever there's a resize, trigger Masonry. If that becomes over saturated with rearrange triggers, set a timeout (500ms) when the resize event occurs to only rearrange after a stable period.

The resize listener is available here.

Amit
  • 41,690
  • 8
  • 66
  • 101