Let's talk about one situation. We are in shop made in Magento.
We are on configurable product page. One of configurable attributes is color. Wouldn't it be good idea, after color is chosen show only images of this color? It can be... and it's not hard to achieve.
First we must do some preparations:
Create attribute "image_storing" type boolean and add it to your attribute sets. Can be limited only to simple products.
For each color of superproduct (configurable+simples) choose one simple product and set value to yes, also to this product upload images of this color.
Now create new module called "imageswitch" (or whatever you want, just remember to change it in the following code).
In it you must have a controller looking like this:
{
publicfunction indexAction()
{
$prod_id =(int)$this->getRequest()->getParam('prod_id');
$color_value =(int)$this->getRequest()->getParam('color_id');
$product=Mage::getModel('catalog/product')->load($prod_id);
if($color_value){
$allProducts=$product->getTypeInstance(true)->getUsedProducts(null,$product);
foreach($allProductsas$prod){
if($prod->getData('image_storing')&&$prod->getColor()==$color_value){// && $prod->isSaleable()
break;
}
}
$prod_full=Mage::getModel('catalog/product')->load($prod->getId());
Mage::register('product',$prod_full);
}
else{
Mage::register('product',$product);
}
$this->loadLayout();
$this->renderLayout();
}
}
This controller will reload the whole media block, but for that we also need proper layout xml file
imageswitch.xml
<layoutversion="0.1.0">
<imageswitch_index_index>
<referencename="root">
<actionmethod="setTemplate"><template>page/empty.phtml</template></action>
</reference>
<referencename="content">
<blocktype="catalog/product_view_media"name="product.info.media"as="media"template="catalog/product/view/media.phtml"/>
</reference>
</imageswitch_index_index>
</layout>
and a layout html file - page/empty.phtml
<?php echo $this->getChildHtml('content') ?>
<!-- end content -->
Then we need to add some observer to catalog/product/view.phtml so we can reload it when the value of color is changed (attribute76 is the id of select for attribute color, it's default id if we use standard Magento attribute, if changed, may need adjusting)
function runajax(){
product_id=$('product_id').value
color_id=$('attribute76').value;
new Ajax.Updater('product_media_content','<?php echo Mage::getBaseUrl(); ?>imageswitch/index/index/prod_id/'+product_id+'/color_id/'+color_id,{ method:'get', evalScripts:true});
}
if($('attribute76')){
Event.observe('attribute76','change', runajax);
}
</script>
and add in the same file id of block to be added by changing :
<?php echo $this->getChildHtml('media') ?>
</div>
<?php echo $this->getChildHtml('media') ?>
</div>
and if all is done properly, now you should be able to see the effect. enjoy!