Jquery颜色框: Display inline content with next and previous button

Question

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

我想使用灯箱显示内联内容，但也显示下一个和上一个按钮。这样，就像在照片库中一样，我将能够浏览与下一个和上一个按钮共享相同 rel 属性的所有项目。

到目前为止，我的代码有些工作。但似乎所有具有相同 rel 属性的元素都无法识别。事实上，只有当我事先单击下一个和上一个按钮时，它们才会出现。

这是我的 HTML

<div id="galcontainer">
<div class="element">
    <a href="link.php" rel="Catalogue" cbx="Catalogue1" class="cbx">
        <img src="image.jpg" />
    </a>
    <div style="display:none">
        <div id="Catalogue1">
            Content Goes Here
        </div>
    </div>
</div>

<div class="element">
    <a href="link.php" rel="Catalogue" cbx="Catalogue27" class="cbx">
        <img src="image.jpg" />
    </a>
    <div style="display:none">
        <div id="Catalogue27">
            Content Goes Here
        </div>
    </div>
</div>
...
</div>

这是 Jquery 代码:

$("a.cbx").click(function(){
   var divtoload=$(this).attr("cbx");
   var cbxgroup=$(this).attr("rel");
   $(this).colorbox({rel:cbxgroup, width:"70%", maxWidth:"720px", inline:true, href:"#"+divtoload});
})

Answer 1

我正在研究类似的问题。我基本上简化了一切并使其正常工作。

Javascript

<script type="text/javascript">
  $(document).ready(function() {
    $(".group1").colorbox({rel:'group1', inline:true, href:$(this).attr('href')});
  }); 
</script>

内容

<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>