I'm wondering is there a way to write this in a cleaner way OR at least somehow detect how many are on the page and echo the correct amount?
$(document).ready(function(){
$("div.projectBlock").each(function(index){
$(this).find('a').addClass("group" + (index+1));
});
$(".group1").colorbox({rel:'group1', slideshow:true});
$(".group2").colorbox({rel:'group2', slideshow:true});
$(".group3").colorbox({rel:'group3', slideshow:true});
$(".group4").colorbox({rel:'group4', slideshow:true});
$(".group5").colorbox({rel:'group5', slideshow:true});
$(".group6").colorbox({rel:'group6', slideshow:true});
$(".group7").colorbox({rel:'group7', slideshow:true});
$(".group8").colorbox({rel:'group8', slideshow:true});
$(".group9").colorbox({rel:'group9', slideshow:true});
$(".group10").colorbox({rel:'group10', slideshow:true});
$(".group11").colorbox({rel:'group11', slideshow:true});
$(".group12").colorbox({rel:'group12', slideshow:true});
$(".group13").colorbox({rel:'group13', slideshow:true});
$(".group14").colorbox({rel:'group14', slideshow:true});
$(".group15").colorbox({rel:'group15', slideshow:true});
$(".group16").colorbox({rel:'group16', slideshow:true});
$(".group17").colorbox({rel:'group17', slideshow:true});
$(".group18").colorbox({rel:'group18', slideshow:true});
$(".group19").colorbox({rel:'group19', slideshow:true});
$(".group20").colorbox({rel:'group20', slideshow:true});
});
I have it set at the top so it adds the class of group1, group2, etc. onto the divs on the page but I'd like to display the correct amount of groups in the code below it accordingly for each separate page for use with colorbox instead of just adding 20. Pages will possibly have more or less of them.