How can I set the order of jQuery functions so that one triggers after the other finishes rendering content?
<p>I'm using <strong>Masonry</strong> and <strong>Embedly</strong> plugin to display embedded content, I've put together an example <a href="http://jsfiddle.net/anir/pBtbb/3/" rel="nofollow">here</a>.</p>

<p>My jQuery is as follows</p>

<pre><code>//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
      });
    });
</code></pre>

<p>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?</p>
