The CCK Multigroup module (was introduced into the 3.x dev version of CCK, but can be detached and placed into the 2.x version without much problems) allows you to 'bundle' your CCK fields into groups. For example, if you wanted to have many images in your node, each with associated title, description, link and other CCK fields, then you would place the image, title, description, field in a multigroup.

One problem I had however was creating a thumbnail gallery to show all this Multigroup data. Some slideshow plugins will display the title along with the image when you click the thumbnail, but there is no associated solution that will show all associated multigroup fields when you click on the thumbnail. This tutorial shows you how to do that. It can be seen in action here: http://www.architecturalflooring.ie/floor-samples

The tutorial assumes that one of your multigroup is an imagefield (field_sample_images) with imagecache presets for thumbnail (thumbnail) and full image (fullimage). The other associated fields (eg the title, description etc) we will refer to as field_assoc1, fieldassoc2 etc.

First we start with the node template file, node.tpl.php or node-{type}.tpl.php. It is important to note that the multigroup doesnt affect the way the fields the called in the node object. We will start by calling the thumbnail images, and then we will call the fullimage preset and all the other fields in a seperate div and let jquery deal with that.

Note that each individual thumbnail, image and other data are in classes titled samplethumb-x, sampleimage-x, and slides-x respectively where x is the xth multigroup bundle - this is important so the javascript can find the appropriate associated classes when the thumbnail is clicked

  <div id="thumbnails">

     <?php for($i=0; $i<count($node->field_sample_images); $i++) { ?>
        <div class="sample-thumb">
          <div class="samplethumb-<?php print $i; ?>">
             <?php print theme('imagecache', 'thumbnails', $node->field_sample_images[$i]['filepath']); ?>	
	   </div>
         </div>				
       <?php } ?>   
  </div>	  
  
   <div id="slides-wrapper">
      <!--- Good to have an explanation --->
      <div id="explanation"><p>Click on the thumbnails to show the full image...</p></div>

      <?php for($i=0; $i<count($node->field_sample_images); $i++) { ?>
          
           <!---- the full image preset. Sometimes (as in the example above) you will want to give this its own div id and for loop -----
           <div class="sampleimage sampleimage-<?php print $i; ?>">
               <?php print theme('imagecache', 'fullimage', $node->field_sample_images[$i]['filepath']); ?>
	   </div>	

           <div class="slides slide-<?php print $i; ?>">
               <!--- If you want, you could use the imagefield description as the title, instead of creating a seperate CCK field --->
	       <h3><?php print $node->field_sample_images[$i]['data']['description'] ?></h3>
		 		
               <!--- Print the other associated fields --->
	       <?php 
                  if ( !empty($node->field_assoc1[$i]['value'] )) {
		     print $node->field_assoc1[$i]['value'];
	          }
                  if ( !empty($node->field_assoc2[$i]['value'] )) {
		      print $node->field_assoc2[$i]['value'];
		   } 
                ?>			  	  			
	    </div>				
	  <?php } ?>	  
  </div>	  

Then we need a bit of jquery to hide/show the appropriate fields - if you put this in your script.js file in Drupal it will automatically show

$(document).ready(function(){   

   /* Hide full image and slides */
   $(".sampleimage").hide();
   $(".slides").hide();
   
   /* Show the first one */
   $(".samplethumb-0").parent().addClass("currthumb");
   $(".sampleimage-0").addClass("currimage").show();
   $(".slide-0").addClass("currslide").show();

   /* When the thumbnail is clicked, we find the associated full image
       and sildes using a bit of string manipulation */
   $("div[class*='samplethumb-']").not(".currimage").click(function() {
     
     $(".currthumb").removeClass("currthumb");
     $(this).parent().addClass("currthumb");
     
     var classname; 
     var s1 = new Array();
     var s2, s3;
     
     classname = $(this).attr("class");
     s1 = classname.split('-');    
     s2 = '.sampleimage-' + s1[1];
     s3 = '.slide-' + s1[1]; 
     
     $(".currimage").removeClass("currimage").hide();
     $(".currslide").removeClass("currslide").hide();
     $(s2).addClass("currimage").fadeIn("1000");
     $(s3).addClass("currslide").show();     
      return false;
   });  
 });

Thats it - you'll probably need a bit of css to style the images. Below is the basics, youll need a lot more than that for layout etc

.sample-thumb {
   float: left;
   margin: 0 0 0 7px;
} 

/* Load all full images on top of each other */
.sample-image {
   position: absolute; 
}     

/* Add border around current thumb */
.currthumb img {
   /* height: 4px less than thumb preset
   width: 4px less than thumb preset */
   border: 2px solid #e11; 
}