Question

显然我今天刚满了Colorbox的问题。（http://www.jacklmoore.com/colorbox/）

该插件旨在用于链接，使用rel属性进行分组/库。

我正在使用LI并希望对它们进行分组。我尝试使用data-rel =“group-a”并提供插件 - ＆gt; rel：$（this）.data（'rel'）但它似乎不喜欢......

还有其他想法吗？再次感谢，我真的很感激。

Answer 1

首先，它不进行分组的原因是因为您绑定了颜色框以显示在单击操作上使用直接HTML引用。当您使用指定HTML的$ .colorbox（{}）触发单个实例时，它就是个体。您要做的是将其绑定到您希望它使用的所有项目，并使用选项指定所需的参数。要记住的另一件事是分组在类之外工作，所以你需要确保你的元素具有你在其中分组的类名。

代码：

$(document).ready(function () {
    $('.inline').colorbox({
        href: function() { return '#'+$(this).data('modal')},
        rel: function() { return $(this).data('rel')},
        inline: true,
        width: "70%"
    });
});

更新了小提琴：http://jsfiddle.net/kDK3s/1/

由于您正在处理页面中的内容，因此您可以使用 href 以及 inline 选项指定正在使用的内容来自当前页面。您还可以使用任何选项的函数来访问元素并返回数据。您将看到 href 来自数据模式，但在函数中添加了哈希符号，而 rel 使用相同的技术来获取rel数据值根据类名分组。

<强>更新此外，如果您希望标题不在其中说“图像”，您可以使用当前选项“current：''”摆脱它，您还可以使用“title：'something'”选项指定标题如果您愿意，也可以从数据属性中提取。

更新了小提琴：http://jsfiddle.net/kDK3s/2/

编辑：在完成解释之前，我太早点击了POST。我还更新了小提琴链接以指向正确的版本，REL来自您的数据。糟糕。

jQuery Colorbox - 使用rel属性的替代方法？

1 个答案: