Search code examples
jquerycolorbox

Firing Colorbox Slideshows Based on Parent DIV

This is probably a fairly novice jQuery / Colorbox question but I haven't been able to stumble upon a solution.

On one of my pages, I have multiple Colorbox slideshows which have as a parent a DIV with a unique ID value, see the code below for a slimmed down example.

How can I best code things so when #display_59 > a.slides_colorbox is clicked, only the images in that particular slideshow will be displayed?

That is, if the user clicks on the images within #display_59, only IMG_3440.jpg and IMG_3441.jpg will be displayed?

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

...

To run the slideshow, I'm using this line, which is pretty much as stock as it comes.

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

Which, as expected, adds all four images to the slideshow. (For context, each slideshow is connected to a blog entry. Since the number of entries will change, there will be an unknown quantity of #display_XX DIVs.)

Solution

  • You could do something like this:

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