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>