Now that Isotope is crawling out of its infancy, I've started recording some of its more spectacular uses. See the Isotope Collection on Ember App. Over the weekend, I've integrated this feed into the Isotope homepage. which is pulled in dynamically via Ember's API.

I've only tiptoed around AJAX previously, so this is an awesome win for me. I no longer have to manage the images and mark-up associated with featured examples, as I've previously had to do with Masonry. The latest examples will be readily viewable as soon as I post them to Ember. Yay internets!

var ajaxError = function(){
  $sitesTitle.removeClass('loading').addClass('error')
    .text('Could not load sites using Isotope :(');
};

// dynamically load sites using Isotope from Ember app
$.getJSON('http://api.emberapp.com/users/view/' + 
            'desandro/collections/view/isotope.json?callback=?')
  .error( ajaxError )
  .success(function( data ){
    // proceed only if we have images
    if ( !data.response || !data.response.images ) {
      ajaxError();
      return;
    }
    // successful stuff follows...
  });

I'm taking advantage of jQuery 1.5's Promise Interface, chaining the .success() and .error() methods on to $.getJSON(). Rebecca Murphey put together a solid video on the new $.ajax hotness which helped me understand how to use the new methods.

The featured example sites is also an opportunity to show off the cellsByRow layout mode. It's nice because it vertically centers items within rows, allowing items of varying height to flow together within a strict grid.

$sitesList.isotope({
  layoutMode: 'cellsByRow',
  cellsByRow: {
    columnWidth: 290,
    rowHeight: 400
  }
});