title: Fancybox2 Inline Content Gallery
body: <p>I am trying to create a gallery of inline content with Fancybox 2, and am failing miserably.</p>
  
  <p>I checked out some other resources online and they seem to indicate doing this relatively easily, yet, I cannot seem to get it to work.</p>
  
  <p>Here is my fiddle:</p>
  
  <p><a href="http://jsfiddle.net/beefchimi/jtxHd/2/" rel="nofollow">http://jsfiddle.net/beefchimi/jtxHd/2/</a></p>
  
  <p>Now, I feel like the fiddle is not loading the resources, so thats a problem. But even with the resources this does not work, I get the fancybox error.</p>
  
  <p>Resources:</p>
  
  <p><a href="http://fancyapps.com/fancybox/source/jquery.fancybox.pack.js?v=2.1.3" rel="nofollow">http://fancyapps.com/fancybox/source/jquery.fancybox.pack.js?v=2.1.3</a>
  http://fancyapps.com/fancybox/source/jquery.fancybox.css?v=2.1.3</p>
  
  <p>Any help would be greatly appreciated.</p>
  
  <p><strong>EDIT:</strong> So I can't submit my question without including some code, because linking to jsfiddle isn't okay, so, here is my markup and fancybox initialization, which you will also find in the jsfiddle:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;section&gt;&lt;!-- Gallery 1 |begin| --&gt;
  
      &lt;!-- Inline post-1 --&gt;
      &lt;article&gt;
          &lt;a href="post-1" class="inlinepopup" rel="gallery1"&gt;Gallery 1: post-1 &amp;gt; post-2 &amp;gt; post-3&lt;/a&gt;
          &lt;div id="post-1"&gt;Inline content for #post-1. Group is Gallery 1.&lt;/div&gt;
      &lt;/article&gt;
  
      &lt;!-- Inline post-2 --&gt;
      &lt;article&gt;
          &lt;a href="post-2" class="inlinepopup" rel="gallery1"&gt;Gallery 1: post-1 &amp;lt; post-2 &amp;gt; post-3&lt;/a&gt;
          &lt;div id="post-2"&gt;Inline content for #post-2. Group is Gallery 1.&lt;/div&gt;
      &lt;/article&gt;
  
      &lt;!-- Inline post-3 --&gt;
      &lt;article&gt;
          &lt;a href="post-3" class="inlinepopup" rel="gallery1"&gt;Gallery 1: post-1 &amp;lt; post-2 &amp;lt; post-3&lt;/a&gt;
          &lt;div id="post-3"&gt;Inline content for #post-3. Group is Gallery 1.&lt;/div&gt;
      &lt;/article&gt;
  
  &lt;/section&gt;&lt;!-- Gallery 1 |end| --&gt;
  
  &lt;section&gt;&lt;!-- Gallery 2 |begin| --&gt;
  
      &lt;!-- Inline post-4 --&gt;
      &lt;article&gt;
          &lt;a href="post-4" class="inlinepopup" rel="gallery2"&gt;Gallery 2: post-4 &amp;gt; post-5&lt;/a&gt;
          &lt;div id="post-4"&gt;Inline content for #post-4. Group is Gallery 2.&lt;/div&gt;
      &lt;/article&gt;
  
      &lt;!-- Inline post-5 --&gt;
      &lt;article&gt;
          &lt;a href="post-5" class="inlinepopup" rel="gallery2"&gt;Gallery 2: post-4 &amp;lt; post-5&lt;/a&gt;
          &lt;div id="post-2"&gt;Inline content for #post-5. Group is Gallery 2.&lt;/div&gt;
      &lt;/article&gt;
  
  &lt;/section&gt;&lt;!-- Gallery 2 |end| --&gt;
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>$(document).ready(function() {
  
      $('a.inlinepopup').fancybox({
          'width'           : '75%',
          'height'          : '75%',
          'autoScale'       : false,
          'type'            : 'inline'
      });
  
  });
  </code></pre>