Question

I’m using Masonry and Embedly plugin to display embedded content, I’ve put together an example here.

My jQuery is as follows

//embedly

    $('.box').find('a').embedly({
      maxWidth: 260,
      wmode: 'transparent',
      method: 'after',
      chars: 50,
      width: 260,
      key:':cd54253e69944ae18ad5ece38b4d0e1e' //temporal
    });


//masonry

   var $container =  $('#main-container');

    $container.imagesLoaded( function(){
        $container.masonry({
          itemSelector: '.box',
          isAnimated: true,
          isFitWidth: true
      });
    });

It appears the Masonry plugin loads first and it causes the overlapping problem (they only show correctly when you resize the result window) I’ve read that I could use callback functions or retrigger Masonry once embedly has finished rendering content, but I don’t know how to do it. Can you help me? Is there any other solution to fix this?

Answer 1

You have an asynchronous timing problem. The masonry layout code is firing before the content has had a chance to load.

So what you want to do is wait to call masonry until after all your content is loaded. You might be tempted to use a timeout, which will tend to cause race conditions.

Ideally, embedly would have a better API and return some kind of deferred promise object the way ajax calls do. Unfortunately, it seems like there isn’t anything that clean so we have to do a few hand stands.

If you define a success: callback, then apparently you have to insert the content yourself.

Fortunately, embedly() fires it’s own event after the content is loaded and displayed which you can bind a callback to.

There are probably many more elegant ways of accomplishing this but for purposes of a simple example using an ugly global, we keep track of the number of loaded content pieces. Each time the embedly event fires indicated a piece of content has been loaded, we increment the counter. Once we reach the total number of matched elements, we know all content has been loaded and we call masonry.

While it’s not pretty, it works: http://jsfiddle.net/sJ5vc/

    //embedly
var matches = $('.box').find('a').length;
var loaded = 0;

// we call this from the embedly callback after all 
// content has been loaded.
function callMasonry() {
    var $container = $('#main-container');

    $container.imagesLoaded(function() {
        $container.masonry({
            itemSelector: '.box',
            isAnimated: true,
            isFitWidth: true
        });
    });
}


var result = $('.box').find('a').embedly({
    maxWidth: 260,
    wmode: 'transparent',
    method: 'after',
    chars: 50,
    width: 260,
    key: ':cd54253e69944ae18ad5ece38b4d0e1e' //temporal
}).bind('embedly-oembed', function(e, oembed) {

    // not as elegant as I would like but increment
    // the counter. Once we have gotten to 
    // the number of matches call masonry
    //
    // It would be much cleaner if embedly could return some kind
    // of deferred object that gets resolved after all matched
    // content has been loaded. 

    loaded++;

    console.log("loaded " + oembed.title);

    if (loaded == matches) {
        callMasonry();
    }


});;