title: Fancybox multiple duplicate images
body: <p>I have read the other threads on this topic but have not found an answer to my particular situation.  I have modified the code from <a href="http://jsfiddle.net/g9R4H/" rel="nofollow">http://jsfiddle.net/g9R4H/</a> to produce an example of what I'm trying to accomplish.  In my implementation I may have multiple duplicates of multiple images. One image may have two thumbnails and another may have 3 all on the same page. I have narrowed down the problem to the eq(0) setting and have determined that changing that value to 1 selects a different image when fancy box opens.  I have not been able to determine how to set that value based on the image that is clicked. In my actual scripts the links are being generated via php and I do know when I create the trigger links what image value it relates to. I'm quite the rookie when it comes to javascript so keep that in mind when you answer.   TIA</p>
  
  <pre><code>&lt;a data-trigger-rel="gallery" class="fancybox-trigger" href="http://fancyapps.com/fancybox/demo/2_b.jpg"&gt;&lt;img src="http://fancyapps.com/fancybox/demo/2_s.jpg" alt=""/&gt;&lt;/a&gt;
  
  &lt;a data-trigger-rel="gallery" class="fancybox-trigger" href="http://fancyapps.com/fancybox/demo/1_b.jpg"&gt;&lt;img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/&gt;&lt;/a&gt;
  
  &lt;br /&gt;
  &lt;br /&gt;
  
  &lt;a rel="gallery" class="fancybox" href="http://fancyapps.com/fancybox/demo/2_b.jpg"&gt;&lt;img src="http://fancyapps.com/fancybox/demo/2_s.jpg" alt=""/&gt;&lt;/a&gt;
  &lt;a rel="gallery" class="fancybox" href="http://fancyapps.com/fancybox/demo/1_b.jpg"&gt;&lt;img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/&gt;&lt;/a&gt;
  
  
  $(".fancybox-trigger").click(function() {
  
      $("a[rel='" + $(this).data('trigger-rel') + "']").eq(0).trigger('click');
  
      return false;
  
  });
  
  
  $(".fancybox").fancybox();
  </code></pre>