基于父 DIV 触发彩盒幻灯片答案

【问题标题】：Firing Colorbox Slideshows Based on Parent DIV基于父 DIV 触发彩盒幻灯片
【发布时间】：2013-08-24 18:19:04
【问题描述】：

这可能是一个相当新手的 jQuery / Colorbox 问题，但我无法找到解决方案。

在我的一个页面上，我有多个 Colorbox 幻灯片，它们有一个具有唯一 ID 值的 DIV 作为父级，请参阅下面的代码以获取精简示例。

我怎样才能最好地编写代码，以便在单击 #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});
});

正如预期的那样，将所有四个图像添加到幻灯片中。（为了上下文，每个幻灯片都连接到一个博客条目。由于条目的数量会发生变化，因此会有未知数量的#display_XX DIV。）

【问题讨论】：

标签： jquery colorbox

【解决方案1】：

你可以这样做：

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

【讨论】：

这非常接近，杰克。我在下面添加了我自己的答案，以更好地展示我为使其正常工作所做的调整。非常感谢！
噢！我犯了一个错误，没有向选择器添加上下文。编辑了我的答案。

【解决方案2】：

Jack's 答案非常接近哦！通过进行一些调整，我能够让它工作：我用 .groupX（用于 group1、group2 等）替换了我的 HTML 中的 .slides_colorbox 并在该类上触发。

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

'group'+(i+1); 是因为页面由 ExpressionEngine 提供支持，我需要添加 +1 以便 groupName 与从零开始的 {count} 标记对齐。

【讨论】：