Magento Forum

   
Move thumbnails to the right of the main image and fix cloud zoom. 
 
gstorni
Jr. Member
 
Total Posts:  1
Joined:  2012-03-02
 

Hi, I`m pretty new to Magento and I’m trying to change the way the product looks.

Currently I have the main image and the thumbnails below. I need to move the thumbnails to the right of the image.

I also added a onmouseover event so when I move through the thumbs, the main image changes. Also have cloud-zoom working and It works fine but only on the first image, when I change the image, it always show me the first one.

I attach my current /app/design/frontend/default/HEME]/template/catalog/product/view/media.phtml

<script type="text/javascript" src="<?php echo $this->getSkinUrl('cloud-zoom/cloud-zoom.1.0.2.min.js');?>"></script>
<link rel="stylesheet" type="text/css" href="<?php echo $this->getSkinUrl('cloud-zoom/cloud-zoom.css');?>" media="screen" />

<?php
    $_product 
$this->getProduct();
    
$_helper $this->helper('catalog/output');
?>
<?php 
if ($_product->getImage() != 'no_selection' && $_product->getImage()): ?>

<class="product-image product-image-zoom">
    
<?php 
        $_img 
'<a href="'.$this->helper('catalog/image')->init($_product'image').'" id="zoom1" class="cloud-zoom"'.$this->htmlEscape($this->getImageLabel()).'" ><img id="image" src="'.$this->helper('catalog/image')->init($_product'image')->resize(590,885).'" /></a>';
        
        echo 
$_helper->productAttribute($_product$_img'image');
    
?>
</p>

<?php else: ?>

<class="product-image">
    
<?php
        $_img 
'<img src="'.$this->helper('catalog/image')->init($_product'image')->resize(590,885).'" id="zoom1" class="cloud-zoom"'.$this->htmlEscape($this->getImageLabel()).'" />';
        echo 
$_helper->productAttribute($_product$_img'image');
    
?>
</p>
<?php endif; ?>
<?php 
if (count($this->getGalleryImages()) > 0): ?>
<div class="more-views">
       
    <
ul id="more">
    
<?php foreach ($this->getGalleryImages() as $_image): ?>

        
<li><a href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()); ?>" title="<?php echo $this->getName();?>" onmouseover="$('image').src = this.href; return false;" onclick="$('image').src = this.href; return false;"><img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(56,66); ?>" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>" /></a></li>
    
<?php endforeach; ?>
    
</ul>
</
div>

<?php endif; ?>

Thanks!
Gonzalo

 
Magento Community Magento Community
Magento Community
Magento Community
 
jamesgarcia
Jr. Member
 
Total Posts:  1
Joined:  2008-09-02
 

Anyone soved this? I also have the same issue…

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
    Back to top