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.)
You could do something like this:
$('.display').each(function(i){
var groupName = 'group'+i;
$('.slides_colorbox', this).colorbox({rel:groupName});
});