1

我正在尝试使用名为 ColorBox (http://colorpowered.com/colorbox/) 的 Jquery Lightbox，但遇到了一些麻烦。

我想使用灯箱来显示内联内容，但也会出现下一个和上一个按钮。这样，就像在照片库中一样，我可以浏览所有与下一个和上一个按钮共享相同 id 属性的项目。如果我将它硬编码到模板中，它可以工作，但如果我像粘贴在帖子末尾那样自动化它，它就不会。

我经常添加一个新元素，所以在开头添加一个新元素需要的时间比我想要的要长。所以我自动化了这个过程，生成的代码看起来和你的一模一样（在你的帖子中），但是颜色框不起作用。有人现在如何修复它（如果可能的话）？帮助将不胜感激。

这有效：

<p><a class="group1" href="#box1">Grouped Photo 1</a></p>
<p><a class="group1" href="#box2">Grouped Photo 2</a></p>
<p><a class="group1" href="#box3">Grouped Photo 3</a></p>

<div id="box1">
  Some text in box 1 Some text in box 1
  Some text in box 1
  Some text in box 1
  Some text in box 1
  Some text in box 1
</div>

<div id="box2">
  Some text in box 2
  Some text in box 2
  Some text in box 2
  Some text in box 2
  Some text in box 2        
</div>

<div id="box3">
  Some text in box 3
  Some text in box 3
  Some text in box 3
  Some text in box 3
  Some text in box 3                
</div>

如果我像这样编辑上面的代码，它不会

<div class="links">
 <p><a class="group1">Grouped Photo 1</a></p>
 <p><a class="group1">Grouped Photo 2</a></p>
 <p><a class="group1">Grouped Photo 3</a></p>
</div>
<div class="boxes">
        <div>
          Some text in box 1 Some text in box 1
          Some text in box 1
          Some text in box 1
          Some text in box 1
          Some text in box 1
        </div>

        <div>
          Some text in box 2
          Some text in box 2
          Some text in box 2
          Some text in box 2
          Some text in box 2        
        </div>

        <div>
          Some text in box 3
          Some text in box 3
          Some text in box 3
          Some text in box 3
          Some text in box 3                
        </div> 
</div>

和 javascript：

$('.links a').each(function(index) {
    $(this).attr("href","#box"+index);
});
$('.boxes div').each(function(index) {
    $(this).attr("id","#box"+index);
});
$(".group1").colorbox({rel:'group1', inline:true, href:$(this).attr('href'), width:"60%"});

这会遍历所有链接并将它们添加到与链接在 href 属性中具有相同的 id

4

3 回答 3

1

没关系，我发现了一个愚蠢的小错误。

$('.boxes div').each(function(index) {
     $(this).attr("id","#box"+index);
});

并修复它：

$('.boxes div').each(function(index) {
    $(this).attr("id","box"+index);
});
于 2012-05-29T14:19:20.173 回答
0

Colorbox 将下一个和上一个按钮添加到通过共享 rel 属性创建的组中。您所要做的就是添加rel="group1"您class="group1"在第一个代码示例中的位置，然后按钮就会出现。

于 2012-05-28T05:42:47.003 回答
0

Colorbox 在调用时通过查看 DOM 元素来设置其所有内部结构。这意味着如果您在 Colorbox 的设置事件之后添加属性，插件将看不到它们。

确保在您运行 HREF 和 ID 分配之前推迟您对 Colorbox 的调用，看看这是否会改变您所追求的行为。

于 2012-05-28T04:15:12.803 回答