Jquery ColorBox：使用next和previous按钮显示内联内容

Question

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

我想使用灯箱显示内嵌内容，但也有下一个和上一个按钮出现。这样，就像在照片库中一样，我将能够浏览与下一个和上一个按钮共享相同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); 
}); 

此经过的所有链接并将它们添加相同的ID链接在href属性

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>