cancel
Showing results for 
Search instead for 
Did you mean: 

dynamically change image in configurable products images

dynamically change image in configurable products images

i m using mangento 1.8.1 and i want to update images on selction of configurable product options..

so far searching on itenrnet i have come accros some javascripts inlucding in a header file.

<?php
 $_product = Mage::registry('current_product'); 
?>
<script type="text/javascript">
//<![CDATA[
        var assocIMG =  // Added  - Removed { here, causes issues with other scripts when not working with a configurable product.
        <?php 
        if ($_product->getTypeId() == "configurable") {
            echo "{";
            $associated_products = $_product->loadByAttribute('sku', $_product->getSku())->getTypeInstance()->getUsedProducts();
            foreach ($associated_products as $assoc)
                $dados[] = $assoc->getId().":'".($assoc->image == "no_selection" || $assoc->image == "" ? $this->helper('catalog/image')->init($_product, 'image', $_product->image)->resize(368,368) : $this->helper('catalog/image')->init($assoc, 'image', $assoc->image)->resize(368,368))."'";
        } else {
            $dados[] =  "''";
        }
        echo implode(',', $dados );     
        if ($_product->getTypeId() == "configurable") {
            echo "}";
        }
        ?> ;
        
        
     
        
//]]	
</script> 

the above code changes the product images after selecting each option. but magento built in zoom funciton is not working. i m using custom theme and my theme is integrated with magic anc cloudzoom functionalities.. so far none of them works for me.

 

my media.phtml file have 

<?php
    $_product = $this->getProduct();
    $_helper = $this->helper('catalog/output');
?>
<?php
$mainImagePath = '';
$galleryImages = $this->getGalleryImages();
if (count($galleryImages) > 0) {
    $gallery = '<div class="more-views">';
    $gallery .= '<ul>';
    foreach ($galleryImages as $_image) {
        if ($_image->getFile() == $_product->getData('small_image')) {
            $mainImagePath = $this->getGalleryUrl($_image);
        }
        $gallery .= '<li>'
                 .  '<a href="' . $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()) . '" '
                 .  'rel="popupWin:\'' . $this->getGalleryUrl($_image) . '\', useZoom: \'cloudZoom\', smallImage: \'' . $this->getCloudImage($this->getProduct(), $_image) .  '\'" class="cloud-zoom-gallery" title="' . $this->htmlEscape($_image->getLabel()) . '">'
                 .  '<img src="' . $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(95) . '"  alt="' . $this->htmlEscape($_image->getLabel()) . '" />'
                 .  '</a></li>';
    }
    $gallery .= '</ul></div>';
}
?>

<?php if ($_product->getImage() != 'no_selection' && $_product->getImage()): ?>
<div class="badge">
	<?php if($_product->getData('new')){echo '<span class="new">'. $_product->getAttributeText('new').'</span>';  }?>
    <?php if($_product->getData('sale')){echo '<span class="sale">'. $_product->getAttributeText('sale').'</span>';  }?>
    </div>
<p class="product-image product-image-zoom">
	
    <a rel="<?php echo $this->renderCloudOptions(); ?>" gallery="<?php echo $mainImagePath; ?>" href="<?php echo $this->helper('catalog/image')->init($_product, 'image'); ?>" class="cloud-zoom ajax" id="cloudZoom">
    <?php
        $_img = '<img id="image" src="'.$this->getCloudImage($_product).'" alt="'.$this->htmlEscape($this->getImageLabel()).'" title="'.$this->htmlEscape($this->getImageLabel()).'" />';
        echo $_helper->productAttribute($_product, $_img, 'image');
    ?>
    </a>
</p>
    <?php if(isset($gallery)): ?>
        <p class="zoom-notice" id="track_hint"><?php echo $this->__('Click on above image to view full picture') ?></p>
       <div class="thumbbox"><?php echo $gallery; ?></div>
    <?php endif; ?>
<?php else: ?>
<p class="product-image">
    <?php
        $_img = '<img src="'.$this->helper('catalog/image')->init($_product, 'image')->resize(265).'" alt="'.$this->htmlEscape($this->getImageLabel()).'" title="'.$this->htmlEscape($this->getImageLabel()).'" />';
        echo $_helper->productAttribute($_product, $_img, 'image');
    ?>
</p>
<?php endif; ?>
<script type="text/javascript">
	jQuery(document).ready(function(){
		var trigggerflag = 1;
		jQuery('.product-image-zoom #wrap').click(function(){
			if(trigggerflag){
			   trigggerflag =0;
			   jQuery('#cloudZoom').trigger('click');
			} 
			trigggerflag =1;		
	});
	jQuery('.more-views').jcarousel({
        start: 1,
		scroll:1,
		wrap: 'circular'
    });
	jQuery('.more-views').hover(function(){
    	jQuery(".jcarousel-prev").stop().delay(0).animate({left: '-21px'},{queue:true,duration:300});
    	jQuery(".jcarousel-next").stop().delay(0).animate({right: '-21px'},{queue:true,duration:300});
  	},function(){
		jQuery(".jcarousel-prev").stop().delay(0).animate({left:'5px'},{queue:true,duration:300});
    	jQuery(".jcarousel-next").stop().delay(0).animate({right:'5px'},{queue:true,duration:300});
		});
	});
</script>

 

pleae help me implementing the pic zoom functionality. also when i select the options in configurable product only the base image associated is displayed.. but i want to display all the images inside a associated simple product.