Question

我有一组DIV，我通过Colorbox显示。

它可以正常工作

$(".my_group").colorbox({rel:'my_group', inline:true, href:$(this).attr('href')});

现在我想在页面打开后立即启动彩盒，所以我尝试了

$.fn.colorbox({rel:'my_group', inline:true, href:$('.my_group').attr('href')});

哪个不起作用。我也试过

$.fn.colorbox({rel:'my_group', inline:true, href:'#box1'});

其中#box1是该组的第一个div。但是，它实际上ADDS box1作为组中的另一个内联幻灯片。

那么自动启动组转换彩盒的最佳方法是什么？

Answer 1

要自动打开彩盒（在页面加载时），只需将open:true添加到您的设置即可。此外，使用'rel'进行分组不一定需要在选项中。如果您将其删除，它将允许您将所有彩盒组放在一个电话中。此外，如果您的目标元素已经具有href属性，则无需将其放在选项中（colorbox会自动查找此属性，即使在div和whatnot上也是如此）。因此，您的colorbox调用可能如下所示：

$(".cbox").colorbox({inline:true, open:true});

然后这个html：

<a class="cbox" href="#C" rel="my_2group">C</a>
<a class="cbox" href="#D" rel="my_2group">D</a>
<a class="cbox" href="#A" rel="my_group">A</a>
<a class="cbox" href="#B" rel="my_group">B</a>

将为您提供2个单独的颜色框，每个颜色框有2个图像，第一个组将在页面加载时打开。

请注意，只有当您可以确保要打开的组在dom中最高时（通常不是问题，因为内联内容通常是隐藏的），将它们组合在一个颜色框调用中才有效。如果情况并非如此，那么你将不得不将它分成几个电话。

Colorbox：自动启动组转换内联div

1 个答案: