Question

Possible Duplicate:
Fancybox multiple links to same gallery without duplication

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.

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.

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!

My markup:

<a class="product-image fancybox" data-fancybox-group="gallery" id="main-image" title="" href="1.jpg">
  <img id="image" src="1.jpg" height="320" width="320" alt="" title="" />
</a>

<ul>
  <li>
    <a class="fancybox" data-fancybox-group="gallery" href="1.jpg" title="Image 1">
      <img src="1.jpg" width="100" height="100" alt="" />
    </a>
  </li>
  <li>
    <a class="fancybox" data-fancybox-group="gallery" href="2.jpg" title="">
      <img src="2.jpg" width="100" height="100" alt="" />
    </a>
  </li>
  <li>
    <a class="fancybox" data-fancybox-group="gallery" href="3.jpg" title="">
      <img src="3.jpg" width="100" height="100" alt="" />
    </a>
  </li>

</ul>

My script:

var $j = jQuery.noConflict(); 
$j(document).ready(function() {
    $j('.fancybox').fancybox({
        nextEffect: 'fade',
        prevEffect: 'fade',
        helpers: {
            title : {
                type : 'float'

            }
        }
    });
});

Answer 1

Try this :
html (remove fancybox class in main img) and append rel to data-fancybox-group

    <a class="product-image" data-fancybox-group-rel="gallery" id="main-image" title="" href="1.jpg">
  <img id="image" src="1.jpg" height="320" width="320" alt="" title="" />
</a>

<ul>
  <li>
    <a class="fancybox" data-fancybox-group="gallery" href="1.jpg" title="Image 1">
      <img src="1.jpg" width="100" height="100" alt="" />
    </a>
  </li>
  <li>
    <a class="fancybox" data-fancybox-group="gallery" href="2.jpg" title="">
      <img src="2.jpg" width="100" height="100" alt="" />
    </a>
  </li>
  <li>
    <a class="fancybox" data-fancybox-group="gallery" href="3.jpg" title="">
      <img src="3.jpg" width="100" height="100" alt="" />
    </a>
  </li>
</ul>

js

  $('a.product-image').click(openFancybox);

function openFancybox(){
 $.fancybox.open($(this).attr('data-fancybox-group-rel'));
}

see doc here API Methods
[be cool,this code was not tested] ;)]
good luck