title: I cannot get afterLoad to work in FancyBox
body: <p>HTML:</p>
  
  <pre><code>&lt;div class="left"&gt;
      &lt;a rel="group" href="images/reveal.jpg" title="Lorem ipsum dolor." class="fancybox"&gt;&lt;img src="images/images3.jpg"&gt;&lt;/a&gt;
      &lt;a rel="group" href="images/reveal2.jpg" title="Lorem ipsum dolor." class="fancybox"&gt;&lt;img src="images/images1.jpg"&gt;&lt;/a&gt;
      &lt;a rel="group" href="images/reveal3.jpg" title="Lorem ipsum dolor." class="fancybox"&gt;&lt;img src="images/images2.jpg"&gt;&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(document).ready(function() {
      $(".fancybox").fancybox({
          afterLoad: function() {
              this.inner.append('&lt;p&gt;TEST&lt;/p&gt;');
              this.content = '&lt;p&gt;TEST2&lt;/p&gt;' + this.content.html();
          }
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>With the above, I get an error in Firebug: "this.inner is undefined."</p>
  
  <p>I'm clearly missing something, but I've been staring at this too long to see what it is. Any help would be appreciated.</p>
  
  <p><strong>EDIT:</strong>
  Thanks for the suggestions.</p>
  
  <p>I tried every one of them, to no avail. I ended up ditching the method I was trying to use, and am simply going to call a div, and style my content in there.</p>
  
  <p>The end result will look something like the HTML here: <a href="http://jsfiddle.net/NjNMC/" rel="nofollow">http://jsfiddle.net/NjNMC/</a>. The JS in that example won't be used; that's what started this whole mess.</p>