Magento configurable products : display images of sub product

In a previous article, I explored a technique that displays the first image of a sub product when selected in Magento’s configurable product page. This time we go one step further by changing the set of thubmnails to display all images associated with the selected sub / simple product. this tutorial requires completion of the the previous one  including the magento wiki ‘Change Product Image on View Page to Associated Product’s Image’ before you go ahead :

1. in your media.phtml file, the big images are loaded via html. the image id is a collection of images from which only the first one is displayed initially, the other are waiting for the thumbail to be clicked. Simply add here the images collection from associated products,  each image being allocated a css ID built from product id and the increment

           <?//<associated product all images>
               if ($_product->getTypeId() == "configurable") {
           $associated_products = $_product->loadByAttribute('sku', $_product->getSku())->getTypeInstance()->getUsedProducts();
             foreach ($associated_products as $assoc)
               {
               $assocProduct =Mage::getModel('catalog/product')->load($assoc->getId());
                $i=0; 
   
                if (count($assocProduct->getMediaGalleryImages()) > 0) {
                      foreach ($assocProduct->getMediaGalleryImages() as $_image)
                       {
                        $imageFile=str_replace(Mage::getBaseUrl('media'),"",$_image->url);
                        $imageId=$assoc->getId() . "_" . $i++;?>
                         <div onclick="showZoom('<?=$imageFile?>')" class="jqzoom">
                 <img style="z-index:-1;display:none" id="image<?php echo $imageId; ?>"
                 width="340px"
                 height="250px"
                 src="<?php echo $this->helper('catalog/image')->init($assocProduct, 'thumbnail2', $_image->getFile())->resize(350, 250); ?>"
                 alt="<?php echo $this->htmlEscape($assocProduct->getName()) ?>"
                   jqimg="<?php echo $_image->url; ?>"></div>
               <?php
                        }
                   }
               }
               } //</associated product all images>
           ?>

2. in the same file, below, the images thumbnails are displayed in unordered lists. What you need to do here to create one unordered list per associated product, with a display none styling  :

               <?//<associated product all images>
               if ($_product->getTypeId() == "configurable") {
           $associated_products = $_product->loadByAttribute('sku', $_product->getSku())->getTypeInstance()->getUsedProducts();
             foreach ($associated_products as $assoc)
               {
               $assocProduct =Mage::getModel('catalog/product')->load($assoc->getId());
               $i=0;
                if (count($assocProduct->getMediaGalleryImages()) > 0) { ?><ul id="teckLoom<?=$assoc->getId()?>" style="z-index:-1;display:none">   <?
                      foreach ($assocProduct->getMediaGalleryImages() as $_image)
                       {
                        $imageFile=str_replace(Mage::getBaseUrl('media'),"",$_image->url);
                        $imageId=$assoc->getId() . "_" . $i++;?>
                        <li>
               <a href="#" onclick="jSelectImage('<?=$imageId ?>'); return false;">
               <img src="<?php echo $this->helper('catalog/image')->init($assocProduct, 'thumbnail', $_image->getFile())->resize(70); ?>" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>" />
           </a>         </li>
   
               <?php
                        }      ?></ul> <?
                   }
               }  }
                 //</associated product all images>   ?>

3. use the select color  function from our previous article to display the associated image set when an option is selected via image click :

   function selectColor(idAttribute, idProduct)
   {
   jQuery('#attribute76').val(idAttribute);
   spConfig.reloadPrice();
   displayProductConfigImage(idProduct);
   jQuery(".more-views ul").hide();
   jQuery(".more-views ul#teckLoom" + idProduct).show();
   }

4. add the following code to js/varien/product.js to let the effect work when an option is selected in the dropdown menu :

   var productNo = intersect(selectedAssocProducts) || selectedAssocProducts[attributeId][0];
   //alert(jQuery("#image0").attr('src'));
   //$('image').attr("src", assocIMG[productNo]);
   displayProductConfigImage(productNo);
   jQuery(".more-views ul").hide();
   jQuery(".more-views ul#teckLoom" + productNo).show();

5. Have a look at the result on ruedesiam’s lovely designed multi color loom furniture : try  the chaise giulietta