Jquery ColorBox：次と前のボタンでインラインコンテンツを表示する

Question

ColorBox（http://colorpowered.com/colorbox/）というJqueryライトボックスを使用しようとしていますが、いくつかの問題が発生しています。

ライトボックスを使用してインラインコンテンツを表示すると同時に、次と前のボタンが表示されます。この方法で、フォトギャラリーのように、次のボタンと前のボタンで同じ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

は私が洙私が望むよりも時間がかかるだろう初めに新しい要素を追加し、多くの場合、新しい要素を追加します。だから私はこの手順を自動化し、生成されたコードはあなたの投稿とまったく同じように見えますが、カラーボックスは機能しません。誰でも今それを修正する方法はありますか？ヘルプは非常に高く評価されます。

私はこの

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