Posted By

TheJasonParker on 03/17/12

Tagged

php
magento

Versions (?)

Last Edited at 03/17/12 01:04am

Statistics

Viewed 793 times

Favorited by 0 user(s)

Related snippets

Magento Gallery Image Rollover

/ Published in: PHP

Replace the code below in your templates 'media.phtml' file. This has mouseover and mouseout but can be removed it needed.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML

<?php
    $_product = $this->getProduct();
    $_helper = $this->helper('catalog/output');
?>
<p class="product-image">
    <?php
        $_img = '<img src="'.$this->helper('catalog/image')->init($_product, 'image')->resize(220).'" alt="'.$this->htmlEscape($this->getImageLabel()).'" title="'.$this->htmlEscape($this->getImageLabel()).'" id="main_image" />';
        echo $_helper->productAttribute($_product, $_img, 'image');
    ?>
</p>
<?php if (count($this->getGalleryImages()) > 0): ?>
<div class="more-views">
    <h4><?php echo $this->__('Click Images') ?></h4>
    <ul>
    <?php foreach ($this->getGalleryImages() as $_image): ?>
        <li>        
 
          <a href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'main_image', $_image->getFile())->resize(220); ?>" title="<?php echo $_product->getName();?>" onmouseover="this.prevsrc=$('main_image').src; $('main_image').src = this.href;" onmouseout="$('main_image').src=this.prevsrc;" onclick="return false;" >
            <!-- The below should remain the same as before -->
          <img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(56, 56); ?>" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>"/>
 
        </a>
 
        </li>
    <?php endforeach; ?>
    </ul>
</div>
<?php endif; ?>