使 Colorbox 一次加载一张图片答案

【问题标题】：Make Colorbox Load one Image at a time使 Colorbox 一次加载一张图片
【发布时间】：2012-02-02 00:52:39
【问题描述】：

我正在使用 jQuery Colorbox 插件在页面上加载一些图像。我的问题是，colorbox 自然会在同一个 Div 中获取多个实例，然后允许用户使用箭头按钮滚动图像。

我想让彩盒单独加载每个图像，而不为每个图像创建单独的彩盒实例/类。

示例代码：

<a href="../../images/rd/demo/1.3.png" class="group2" ><img src="/images/rd/demo/2.png" /></a>
<a href="../../images/rd/demo/1.3.png" class="group2" ><img src="/images/rd/demo/2.png" /></a>
<a href="../../images/rd/demo/1.3.png" class="group2" ><img src="/images/rd/demo/2.png" /></a>

$(".group2").colorbox({
    rel:'group2', 
    transition:"fade",
    opacity:0.50,
    innerWidth:650,
    innerHeight:400,
    arrowKey: false     
});

如果我单击上面的图像/链接之一，colorbox 将加载所有三个并允许用户在它们之间切换。我只想单独加载每个图像，而不必为每个图像分配一个唯一的类 ID。

我查看了Colorbox Documentation，并没有看到任何对我的案子有帮助的东西。

【问题讨论】：

标签： javascript jquery html colorbox

【解决方案1】：

我认为你只需要删除这个：

rel:'group2',

根据文档，这就是将它们组合在一起的原因。

【讨论】：

喜欢布塔！一定看过了...谢谢！

【解决方案2】：

您是否尝试过应该覆盖默认分组的$("a.gallery").colorbox({rel:"group1"});？

【讨论】：

相同的结果，仍然让我浏览图像。更新了您的示例以匹配我的代码。 <a href="../../images/rd/demo/1.3.png" class="gallery" ><img rel="group2" src="/images/rd/demo/2 (3).png" /></a>