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

colorbox-extra.js

// 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');
      }
    });