1

I have been racking my brain and trying many different ways of getting isotope to run after embed.ly returns my data.

$(function () {

    $.embedly.defaults.key = '0addb97cbe9c4522b1f52c128a15d48a';
    $('a.oembedj').embedly({
        display: function (data) {

            //   $(this).html(data.thumbnail_url);
            //$(this).html(function() {
            //var emph = data.thumbnail_url;
            // return '<img src=" ' + emph + '" />';
            //});
            $(this).html(function () {

                var emph = data.description;
                return '<p>" ' + emph + '"</p>';
            });
        }
    })

    $(function () {

        var $container = $('#container').isotope({
            itemSelector: '.news-item',
            columnWidth: 70
        });

        //  $('.news-item').click(function () {
        //    $(this).remove();
        //      $container.isotope();
        //    });

    })
});

I can't seem to get it to work. Here is my jsfiddle sample. Let me know what you think-

http://jsfiddle.net/daveferrara1/7XusF/28/

Jason P
  • 26,984
  • 3
  • 31
  • 45
daveferrara1
  • 87
  • 1
  • 11
  • If you want it to run after the display function, put the isotope call at the end of the display function. – Roy J Aug 14 '13 at 18:20
  • Thanks very much. I have been down this road before with a few different solutions. check it out with images. http://jsfiddle.net/daveferrara1/7XusF/31/ I moved the isotope call inside like you suggested. Now on the initial isotope runs too soon and the images overlap. I believe isotope is calculating before the images are returned. – daveferrara1 Aug 14 '13 at 19:51

1 Answers1

1

Part of my difficulty is that I don't know embedly or isotope, so I don't really know what constitutes success. Nevertheless, since nobody else has a better idea, I've done this: http://jsfiddle.net/7XusF/35/

I realized that display is called for each image, and you probably only want isotope called once. So I have display build the element (I did it in a bit more idiomatic way), and I put a load trigger on the img.

Each time an img is created, waitingFor is incremented. Each time a load completes, it is decremented. I assume that the load requests will come faster than the load completions, so you won't get down to zero multiple times. The Fiddle behaves as expected in that regard. Is the behavior what you want?

display: function (data) {
    var emph = data.thumbnail_url;
    waitingFor += 1;
    $('<img>').attr('src', emph).on('load', function () {
        waitingFor -= 1;
        if (waitingFor === 0) {
            var $container = $('#container').isotope({
                itemSelector: '.news-item',
                columnWidth: 70
            });
            console.debug('Isotoping.');
        }
    }).appendTo($(this));
}
Roy J
  • 42,522
  • 10
  • 78
  • 102