0

これはおそらくかなり初心者の jQuery/Colorbox の質問ですが、解決策を見つけることができませんでした。

私のページの 1 つで、一意の ID 値を持つ DIV を親として持つ複数のColorboxスライドショーがあります。スリム化された例については、以下のコードを参照してください。

#display_59 > a.slides_colorbox がクリックされたときに、その特定のスライドショーの画像のみが表示されるようにするには、どのようにコーディングすればよいでしょうか?

つまり、ユーザーが #display_59 内の画像をクリックすると、IMG_3440.jpg と IMG_3441.jpg だけが表示されるのですか?

<div id="display_59" class="display">
   <div class="slides_thumbs">
     <a class="slides_colorbox" href="/images/IMG_3440.JPG"><img src="/images/made/public/burns/IMG_3440_thumb.JPG" alt="" width="62" height="62" /></a>
     <a class="slides_colorbox" href="/images/IMG_3441.JPG"><img src="/images/made/public/burns/IMG_3441_thumb.JPG" alt="" width="62" height="62" /></a>
   </div>
</div>

<div id="display_60" class="display">
   <div class="slides_thumbs">
     <a class="slides_colorbox" href="/images/IMG_2444.JPG"><img src="/images/made/public/burns/IMG_2444_thumb.JPG" alt="" width="62" height="62" /></a>
     <a class="slides_colorbox" href="/images/IMG_2445.JPG"><img src="/images/made/public/burns/IMG_2445_thumb.JPG" alt="" width="62" height="62" /></a>
   </div>
</div>

...

スライドショーを実行するために、私はこのラインを使用しています。

$(document).ready(function(){
 (".slides_colorbox").colorbox({rel:'slides_colorbox', slideshow:false});
});

これにより、予想どおり、4 つの画像すべてがスライドショーに追加されます。(文脈上、各スライドショーはブログ エントリに関連付けられています。エントリの数は変化するため、不明な数の #display_XX DIV が存在します。)

4

2 に答える 2

1

次のようなことができます。

$('.display').each(function(i){
  var groupName = 'group'+i;
  $('.slides_colorbox', this).colorbox({rel:groupName});
});
于 2013-08-24T19:42:53.860 に答える
0

ジャックの答えは、ああ、とても近いものでした！HTML の .slides_colorbox を .groupX (group1、group2 など) に置き換えて、そのクラスを起動しました。 

$('.display').each(function(i){   
  var groupName = 'group'+(i+1);
  $("."+groupName).colorbox({rel:groupName});
});

これ'group'+(i+1);は、ページが ExpressionEngine を利用しているため、+1 を追加して、groupName をゼロベースの {count} タグに揃える必要があるためです。

于 2013-08-24T22:08:32.400 に答える