title: Fancybox 2.1.0 exclude trigger image from gallery
body: <blockquote>
    <p><strong>Possible Duplicate:</strong><br>
    <a href="https://stackoverflow.com/questions/13359115/fancybox-multiple-links-to-same-gallery-without-duplication">Fancybox multiple links to same gallery without duplication</a>  </p>
  </blockquote>
  
  
  
  <p>I'm using fancybox 2.1.0 with jQuery 1.8.3 to load up a gallery of images but it's not working quite how I want it to. I have a large main image then a set of gallery thumbnails underneath. Clicking either the main image or the thumbnails opens the fancybox gallery.</p>
  
  <p>The problem is the main image also features in the thumbnails, so when the gallery is launched I get the first image repeating: 1.jpg, 1.jpg, 2.jpg, 3.jpg etc.</p>
  
  <p>I want the main image to trigger the gallery lightbox but not be included in it but I can't seem to get it right. Would really appreciate any suggestions!</p>
  
  <p>My markup:</p>
  
  <pre><code>&lt;a class="product-image fancybox" data-fancybox-group="gallery" id="main-image" title="" href="1.jpg"&gt;
    &lt;img id="image" src="1.jpg" height="320" width="320" alt="" title="" /&gt;
  &lt;/a&gt;
  
  &lt;ul&gt;
    &lt;li&gt;
      &lt;a class="fancybox" data-fancybox-group="gallery" href="1.jpg" title="Image 1"&gt;
        &lt;img src="1.jpg" width="100" height="100" alt="" /&gt;
      &lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;a class="fancybox" data-fancybox-group="gallery" href="2.jpg" title=""&gt;
        &lt;img src="2.jpg" width="100" height="100" alt="" /&gt;
      &lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;a class="fancybox" data-fancybox-group="gallery" href="3.jpg" title=""&gt;
        &lt;img src="3.jpg" width="100" height="100" alt="" /&gt;
      &lt;/a&gt;
    &lt;/li&gt;
  
  &lt;/ul&gt;
  </code></pre>
  
  <p>My script:</p>
  
  <pre><code>var $j = jQuery.noConflict(); 
  $j(document).ready(function() {
      $j('.fancybox').fancybox({
          nextEffect: 'fade',
          prevEffect: 'fade',
          helpers: {
              title : {
                  type : 'float'
  
              }
          }
      });
  });
  </code></pre>