Magento Gallery Image Rollover


/ Published in: PHP
Save to your folder(s)

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


Copy this code and paste it in your HTML
  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


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.