Question

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

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

我经常添加一个新元素，因此在开头添加一个新元素需要的时间比我想要的要长。所以我自动化了这个程序，生成的代码看起来和你的一样（在你的帖子中），但是colorbox不起作用。现在有人如何解决它（如果可能的话）？非常感谢帮助。

这有效：

<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

Answer 1

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

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

并修复它：

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

Answer 2

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

确保推迟调用Colorbox，直到您运行HREF和ID分配，并查看是否将行为更改为您所追求的内容。

Answer 3

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

Jquery ColorBox：显示内容，如图库

3 个答案: