jquery - Fancybox 2.1.0 从图库中排除触发图像

Question

这个问题已经有答案了:

已关闭 10 年前。

Possible Duplicate:
Fancybox multiple links to same gallery without duplication

我正在使用 fancybox 2.1.0 和 jQuery 1.8.3 来加载图像库，但它并没有按照我想要的方式工作。我有一个大的主图像，然后是一组图库缩略图。单击主图像或缩略图将打开 fancybox 图库。

问题是主图像也出现在缩略图中，因此当图库启动时，我会重复第一张图像:1.jpg、1.jpg、2.jpg、3.jpg 等。

我希望主图像触发图库灯箱，但不包含在其中，但我似乎无法正确处理。非常感谢任何建议!

我的标记:

<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>

我的脚本:

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

            }
        }
    });
});

Answer 1

试试这个:html(删除主img中的fancybox类)并将rel附加到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'));
}

参见文档here API方法[冷静，此代码未经测试] ;)]祝你好运