1

ColorBox（http://colorpowered.com/colorbox/）と呼ばれるJquery Lightboxを使用しようとしていますが、いくつかの問題が発生しています。

ライトボックスを使用してインラインコンテンツを表示したいのですが、次と前のボタンも表示します。このようにして、フォトギャラリーのように、次のボタンと前のボタンで同じid属性を共有するすべてのアイテムをナビゲートできます。テンプレートにハードコードすると機能しますが、投稿の最後に貼り付けるように自動化すると機能しません。

私は頻繁に新しい要素を追加しますが、最初に新しい要素を追加すると、思ったよりも時間がかかります。だから私はこの手順を自動化し、生成されたコードは（あなたの投稿で）あなたのものとまったく同じように見えますが、カラーボックスは機能しません。誰かが今それを修正する方法はありますか（可能であれば）？助けていただければ幸いです。

これは機能します：

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

上記のコードをこのように編集しても、編集されません

<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) {
    $(this).attr("href","#box"+index);
});
$('.boxes div').each(function(index) {
    $(this).attr("id","#box"+index);
});
$(".group1").colorbox({rel:'group1', inline:true, href:$(this).attr('href'), width:"60%"});

これはすべてのリンクを通過し、リンクがhref属性に持っているのと同じIDを追加します

4

3 に答える 3

1

気にしないでください、私はばかげた小さな間違いを見つけました。

$('.boxes div').each(function(index) {
     $(this).attr("id","#box"+index);
});

そしてそれを修正しました：

$('.boxes div').each(function(index) {
    $(this).attr("id","box"+index);
});
于 2012-05-29T14:19:20.173 に答える
0

Colorboxは、呼び出し時にDOM要素を確認することにより、すべての内部構造を設定します。これは、Colorboxのセットアップイベントの後に属性を追加した場合、プラグインはそれらを認識しないことを意味します。

HREFとIDの割り当てを実行するまで、Colorboxの呼び出しを延期し、それによって動作が目的の動作に変わるかどうかを確認してください。

于 2012-05-28T04:15:12.803 に答える
0

Colorbox は、共有 rel 属性を介して作成されたグループに、次のボタンと前のボタンを追加します。最初のコード サンプルのrel="group1"場所に追加するだけで、ボタンが表示されます。class="group1"

于 2012-05-28T05:42:47.003 に答える