title: Muliple images on one page each opens unique HTML content
body: <p>I am generally a novice with jQuery and javascript, so I need a little help so I apologize in advance if there is a simple solution to this.</p>
  
  <p>I want to have multiple images on page that when you click on them they each open an html fancybox with additonaional images, text and links in it, which according tot he code needs to be done with iframes.</p>
  
  <p>This is a sample of what i want to do (I used the fancybox 2 code and broke it down to effect that I wanted).</p>
  
  <pre><code>    $(document).ready(function() {
        $(".fancybox-flyout").click(function() {
         $.fancybox.open({
          padding : 5,
          openEffect : 'elastic',
          openSpeed  : 150,
          closeEffect : 'elastic',
          closeSpeed  : 150,
          closeClick : true,
          helpers : {
              overlay : true
              }
          });
  </code></pre>
  
  <p></p>
  
  <p>I want this script to function on these objects:</p>
  
  <pre><code>    &lt;a class="fancybox-flyout" href="/iframe_1.html"&gt;&lt;img src="image_1.jpg" alt="" /&gt;&lt;/a&gt;
      &lt;a class="fancybox-flyout" href="/iframe_2.html"&gt;&lt;img src="image_2.jpg" alt="" /&gt;&lt;/a&gt;
      &lt;a class="fancybox-flyout" href="/iframe_2.html"&gt;&lt;img src="image_3.jpg" alt="" /&gt;&lt;/a&gt;
  </code></pre>
  
  <p>All this does though is open the link without the effect, so maybe I cannibalized it too much, but basically I wanted the effect of "fancy-box-effects-c" from the source code and apply it to opening html content instead of another picture.</p>
  
  <p>Thanks!</p>