title: Expanding preview (calcHeight : function)
body: <p>I'm building <a href="http://christinaibsenmeyer.dk/hn2/" rel="nofollow">a website</a> over <a href="http://tympanus.net/codrops/2013/03/19/thumbnail-grid-with-expanding-preview/" rel="nofollow">this tutorial</a>.</p>
  
  <p>I'm trying to figure out how to add an auto height based on the content’s height. It was originally locked to the windows size but I want it to expand further down.</p>
  
  <p>Line 455 of the original code:</p>
  
  <pre><code>        calcHeight : function() {
  
          var heightPreview = winsize.height - this.$item.data( 'height' ) - marginExpanded,
              itemHeight = winsize.height;
  
          if( heightPreview &lt; settings.minHeight ) {
              heightPreview = settings.minHeight;
              itemHeight = settings.minHeight + this.$item.data( 'height' ) + marginExpanded;
          }
  
          this.height = heightPreview;
          this.itemHeight = itemHeight;
  
      },
  </code></pre>
  
  <p>My solution that works 50% of the time (works pretty good localy?!):</p>
  
  <pre><code>        calcHeight : function() {
          var lol = this.$fullimage[0].getElementsByTagName('img')[0];
          var oImage = new Image();
  
          oImage.onload = function(){
              this.height// width of loaded image
          }
  
          oImage.src = lol.src;
          this.height = oImage.height;
          this.itemHeight = oImage.height+650;
      },
      setHeights : function() {
  
          var self = this,
              onEndFn = function() {
                  if( support ) {
                      self.$item.off( transEndEventName );
                  }
                  self.$item.addClass( 'og-expanded' );
              };
  </code></pre>