docs : add Sites using Isotope from Ember

css/style.css

@@ -607,6 +607,57 @@ code .nd { color: #9FAD7E; } /* CSS pseudo selector */
   width: 436px;
 }
 
+/**** Sites using Isotope ****/
+
+#sites h2 {
+  padding: 0.4em;
+  line-height: 32px;
+  margin-bottom: 0.4em;
+}
+
+#sites h2 img {
+  display: inline-block;
+  margin-right: 0.4em;
+  vertical-align: bottom;
+}
+
+#sites h2.loading {
+  background: white;
+  color: #222;
+}
+
+#sites ul {
+  margin: 0;
+}
+
+#sites li {
+  list-style: none;
+  float: left;
+  width: 290px;
+}
+
+#sites li a,
+#sites li b,
+#sites li img {
+  display: block;
+}
+
+#sites li a {
+  width: 270px;
+  padding: 10px;
+}
+
+#sites li a:hover {
+  background: #333;
+}
+
+#sites li b { 
+  font-weight: bold;
+  line-height: 1.3em;
+  margin-bottom: 0.6em;
+}
+
+
 /**************************
 **  Infinite Scroll
 **************************/

index.html

@@ -91,6 +91,8 @@ layout: nil
     <li class="link" data-related="z-etc"><a href="http://github.com/desandro/isotope">Isotope on GitHub</a></li>
   </ul>
   
+  <div id="sites"></div>
+  
   {% include footer.html %}
   
   
@@ -142,6 +144,53 @@ layout: nil
         }
       });
       
+      // Sites using Isotope markup
+      var $sites = $('#sites'),
+          $sitesTitle = $('<h2 class="loading"><img src="http://i.imgur.com/qkKy8.gif" />Loading sites using Isotope</h2>'),
+          $sitesList = $('<ul class="clearfix"></ul>');
+          
+      $sites.append( $sitesTitle ).append( $sitesList );
+
+      $sitesList.isotope({
+        layoutMode: 'cellsByRow',
+        cellsByRow: {
+          columnWidth: 290,
+          rowHeight: 400
+        }
+      });
+      
+      // dynamically load sites using Isotope from Ember app
+      $.getJSON('http://api.emberapp.com/users/view/' + 
+                  'desandro/collections/view/isotope.json?callback=?',
+        function( data ){
+          
+          // proceed only if we have images
+          if ( !data.response || !data.response.images ) {
+            return;
+          }
+          var images = data.response.images,
+              items = [],
+              item, image;
+          
+          for ( var i=0, len = images.length; i < len; i++ ) {
+            image = images[i];
+            item = '<li><a href="' + image.url + '">'
+              + '<b>' + image.name + '</b>'
+              + '<img src="' + image.file.src.replace('/m.', '/s.') + '" />'
+              + '</a></li>';
+            items.push( item );
+          }
+          
+          var $items = $( items.join('') );
+          
+          $items.imagesLoaded(function(){
+            $sitesTitle.removeClass('loading').text('Sites using Isotope');
+            $sitesList.isotope( 'insert', $items );
+          });
+          
+        });
+      
+      
     });
   </script>