Question

可能重复：
Fancybox multiple links to same gallery without duplication

我正在使用带有jQuery 1.8.3的fancybox 2.1.0来加载一个图像库，但它并不像我想要的那样工作。我有一个大的主图像，然后是一组画廊缩略图。单击主图像或缩略图可打开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'));
}

请参阅doc here API方法 [很酷，此代码未经过测试];）] 祝你好运

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

1 个答案: