title: Fancybox 1.3.4 — How to use multiple inline elements in a single gallery?
body: <p>Usually you use <a href="http://fancybox.net/howto" rel="nofollow">Fancybox</a> in order to display a gallery consisting of multiple images where you can flip from one image to the next one (using arrows or the keyboard).</p>
  
  <p><strong>Question:</strong><br>
  I would like to do the same with <code>inline</code> HTML elements, so that Fancybox opens the gallery, shows the first inline element, and if you click on the arrow, it would show the second inline element, etc.</p>
  
  <p>How do you do that? Is it possible with Fancybox at all?</p>
  
  <p>Here is my code <strong>that works for a single HTML inline element</strong>:</p>
  
  <pre><code>&lt;script&gt;
    $(document).ready(function() {
      $('a#inlinetest').fancybox({
          'type':'inline',
          'overlayShow': true,
          'overlayOpacity': 0.7,
          'overlayColor': '#666',
          'titleShow': false
      });
    });
  &lt;/script&gt;
  &lt;div&gt;
    &lt;a id="inlinetest"  href="#inlinedata"&gt;Click here&lt;/a&gt;
    &lt;div style="display:none;"&gt;
      &lt;div id="inlinedata"&gt;
        &lt;div&gt;TEST&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And here is the code <strong>with TWO INLINE elements, that does not work</strong>:</p>
  
  <pre><code>&lt;script&gt;
    $(document).ready(function() {
      $('a#inlinetest').fancybox({
          'type':'inline',
          'overlayShow': true,
          'overlayOpacity': 0.7,
          'overlayColor': '#666',
          'titleShow': false
      });
    });
  &lt;/script&gt;
  &lt;div&gt;
    &lt;a id="inlinetest"  href="#inlinedata"&gt;Click here&lt;/a&gt;
    &lt;div style="display:none;"&gt;
      &lt;div id="inlinedata"&gt;
        &lt;div&gt;HTML Content of element 1 comes here&lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="inlinedata"&gt;
        &lt;div&gt;HTML Content of element 2 comes here&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>