colorbox gallery Overview page with teasers: we want every teaser to be a gallery of its own and not all images off all teasers in 1 colorbox solution: add specific class per gallery on the a elements
// references
// loop through teasers
// add different rel to each li
// for colorbox to see each teaser as a separate gallery
var count = 0;
$('ul.references.overview li').each(function(){
$(this).find('.colorbox a').attr('rel','gallery-'+count);
// add class to first list item, to be able to hide all others
$(this).find('ul li:first').addClass('show');
count++;
});
// COLORBOX
$(".colorbox a").colorbox({
// rel:'gal', //uncomment if you want all teaser images to appear in the same colorbox gallery
transition:'fade',
maxWidth:'100%',
maxHeight:'100%',
title:function(){
return $(this).find("img").attr('alt');
}
});