3

可能重复：
Fancybox 多个链接到同一个画廊，没有重复

我正在使用 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'

            }
        }
    });
});
4

1 回答 1

2

试试这个：html（删除fancybox主img中的类）并附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'));
}

请参阅此处的文档API 方法 [很酷，此代码未经测试] ;)] 祝你好运

于 2013-01-15T13:21:51.327 回答