title: how to prevent fancybox from deleting the clicked thumbnail
body: <p>Fist time using fancybox and it's not going so well.. starting to wish I didn't bother with it.</p>
  
  <p>I have some thumbnails in a row, fine, then when I click one it opens the THUMBNAIL instead of the link whats worse it DELETES the thumbnail from the DOM. I've dug around in the fancybox src for the issue but there's a lot of it and I'll probably end up killing functionality so I thought I'd post here.</p>
  
  <p>heres the code:</p>
  
  <p>The raw HTML comes from CMS looking like:</p>
  
  <pre><code>&lt;img src="http://blah..blah..from..flickr..001_s.jpg" alt="my image one" class="flickr-square" title="test image" longdesc="" data-url="http://blah..blah..flickr..detail..page" data-orig="http://blah..blah..flickr..big..001_b.jpg"&gt;
  &lt;img src="http://blah..blah..from..flickr..002_s.jpg" alt="my image one" class="flickr-square" title="test image" longdesc="" data-url="http://blah..blah..flickr..detail..page" data-orig="http://blah..blah..flickr..big..002_b.jpg"&gt;
  </code></pre>
  
  <p>I then run some stuff in backbone view render, the important bit is this:</p>
  
  <pre><code>    var imgs = this.$el.find("img"); //:a jquery group of the img elements above
      this.content = this.$el.find("span.postcontent");
      //empty current
      this.content.empty();
      //make replacement
      for(i= 0;i&lt;imgs.length;i++)
      {
  
          var curImg = $(imgs[i]);
          var curLink = $("&lt;a/&gt;");
          curLink.attr("href",curImg.attr('data-orig'))
          curLink.append(curImg);
          curLink.on("click",function(e){
              e.preventDefault();
              $.fancybox.open(imgs)
          });
          this.content.append(curLink)
      }
  </code></pre>
  
  <p>I now have rendered html like this:</p>
  
  <pre><code>   &lt;a href="http://blah..blah..flickr..big..001_b.jpg"&gt;
      &lt;img src="http://blah..blah..from..flickr..001_s.jpg" alt="my image one" class="flickr-square" title="test image" longdesc="" data-url="http://blah..blah..flickr..detail..page" data-orig="http://blah..blah..flickr..big..001_b.jpg"&gt;
     &lt;/a&gt;
     &lt;a href="http://blah..blah..flickr..big..002_b.jpg"&gt;
      &lt;img src="http://blah..blah..from..flickr..002_s.jpg" alt="my image one" class="flickr-square" title="test image" longdesc="" data-url="http://blah..blah..flickr..detail..page" data-orig="http://blah..blah..flickr..big..002_b.jpg"&gt;
     &lt;/a&gt;
  </code></pre>
  
  <p>So far so good... now, when I click the link/thumb it does the fancybox thinggy but shows the THUMBNAIL not the linked image, tiny in the middle in it's lightboxy thing and whats really annoying is that the clicked thumbnail in the page itself has now been completely removed from the dom ie.:</p>
  
  <pre><code>       &lt;a href="http://blah..blah..flickr..big..001_b.jpg"&gt; 
           ///THIS IS MISSING COMPLETELY..... ggggggrrrrr 
         &lt;/a&gt;
         &lt;a href="http://blah..blah..flickr..big..002_b.jpg"&gt;
          &lt;img src="http://blah..blah..from..flickr..002_s.jpg" alt="my image one" class="flickr-square" title="test image" longdesc="" data-url="http://blah..blah..flickr..detail..page" data-orig="http://blah..blah..flickr..big..002_b.jpg"&gt;
         &lt;/a&gt;
  </code></pre>