0

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

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

我正在使用 LI 并希望将它们分组。我尝试使用 data-rel="group-a" 并提供插件 -> rel: $(this).data('rel') 但它似乎不喜欢那样......

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

4

1 回答 1

3

首先，它没有分组的原因是因为您正在绑定颜色框以在单击操作上使用直接 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 数据值以根据类名进行分组。

更新： 另外，如果您希望标题中不显示“图像”，您可以使用当前选项“当前：''”将其删除，您还可以使用“标题：'某物'”另外指定一个标题如果您愿意，您也可以从数据属性中提取该选项。

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

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

于 2013-11-14T02:41:37.887 回答