Fancybox 2.1.0 从图库中排除触发图像 [重复]答案

【问题标题】：Fancybox 2.1.0 exclude trigger image from gallery [duplicate]Fancybox 2.1.0 从图库中排除触发图像 [重复]
【发布时间】：2013-01-15 13:09:59
【问题描述】：

可能重复：
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'

            }
        }
    });
});

【问题讨论】：

查看参考帖子以获得您的答案。

标签： jquery fancybox fancybox-2

【解决方案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>

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

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

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

【讨论】：