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>

Answer 2

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

如果我像这样编辑你的代码

<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) {
    q(this).attr("href","#box"+index);
});
$('.boxes div').each(function(index) {
    q(this).attr("id","#box"+index);
});

这会遍历所有链接并添加与链接在href属性中相同的ID

Answer 3

我知道这是一个老问题。但找到了不同的解决方案。该插件的开发人员推荐它：https://github.com/jackmoore/colorbox/issues/600

<a href='#' id='open'>Open inline group</a>
<div style='display:none'>
    <div class='inline'>
        <div style='padding:10px; background:#fff;'>
            <p><strong>This content comes from a hidden element on this page.</strong></p>
        </div>
    </div>
    <div class='inline'>
        <div style='padding:10px; background:#fff;'>
            <p><strong>2. This content comes from a hidden element on this page.</strong></p>
        </div>
    </div>
    <div class='inline'>
        <div style='padding:10px; background:#fff;'>
            <p><strong>3. This content comes from a hidden element on this page.</strong></p>
        </div>
    </div>
    <div class='inline'>
        <div style='padding:10px; background:#fff;'>
            <p><strong>4. This content comes from a hidden element on this page.</strong></p>
        </div>
    </div>
</div>
<script>
      var $group = $('.inline').colorbox({inline:true, rel:'inline', href: function(){
            return $(this).children();
      }});
      $('#open').on('click', function(e){
            e.preventDefault();
            $group.eq(0).click();
      });
</script>

Jquery ColorBox：使用下一个和上一个按钮显示内联内容

3 个答案: