我可以通过rel属性以外的方式对Fancybox 2进行分组

时间:2014-05-14 22:46:58

标签: jquery fancybox fancybox-2

我有一个很好的画廊,在一个页面上有很多图片,我使用Fancybox很好地使用不同的“rel”属性在组中显示它们。但是我想创建一个“查看全部”选项来忽略“rel”并将它们全部加入到一个组中。我不想用js更改HTML,因为我有超过100个图像,它不会有效。另外,我想避免构建一个项目数组来告诉Fancybox显示(出于同样的原因)。那么有没有一种方法可以欺骗Fancybox分组而不是“rel”,但可能是某些类或其他属性?

我的(非常简化的)HTML看起来像:

<div class="gallery">
  <a rel="group1" class="showall" href="image01-full.jpg"><img src="image01.jpg"/></a>
  <a rel="group1" class="showall" href="image02-full.jpg"><img src="image02.jpg"/></a>

  <a rel="group2" class="showall" href="image03-full.jpg"><img src="image03.jpg"/></a>
  <a rel="group2" class="showall" href="image04-full.jpg"><img src="image04.jpg"/></a>

  <a rel="group3" class="showall" href="image05-full.jpg"><img src="image05.jpg"/></a>
  <a rel="group3" class="showall" href="image06-full.jpg"><img src="image06.jpg"/></a>
</div>

我以最简单的形式定位我的图像:

$('.gallery a').fancybox();

因此,如果在此示例中,我的图像将按照3组进行分组。 我可以通过告诉按类“showall”或其他什么来分组吗?或者唯一的方法是构建所有项目的数据数组,并在需要时将其作为选项提供?

谢谢!

1 个答案:

答案 0 :(得分:6)

您可以将“rel”替换为“data-fancybox-group”。

参见例子:http://fancyapps.com/fancybox/#examples