Posted By

TheJasonParker on 03/17/12


Tagged

php magento


Versions (?)

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.

  1. <?php
  2. $_product = $this->getProduct();
  3. $_helper = $this->helper('catalog/output');
  4. ?>
  5. <p class="product-image">
  6. <?php
  7. $_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" />';
  8. echo $_helper->productAttribute($_product, $_img, 'image');
  9. ?>
  10. </p>
  11. <?php if (count($this->getGalleryImages()) > 0): ?>
  12. <div class="more-views">
  13. <h4><?php echo $this->__('Click Images') ?></h4>
  14. <ul>
  15. <?php foreach ($this->getGalleryImages() as $_image): ?>
  16. <li>
  17.  
  18. <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;" >
  19. <!-- The below should remain the same as before -->
  20. <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()) ?>"/>
  21.  
  22. </a>
  23.  
  24. </li>
  25. <?php endforeach; ?>
  26. </ul>
  27. </div>
  28. <?php endif; ?>

Report this snippet  

You need to login to post a comment.