Magento Product Thumbnail Image Switcher

This article which explains how to easily replace the default functionality of your product images (the pop-up window when you click on a thumbnail below the main image) with a image swapping functionality.

Step One

Edit the media.phtml file. It can be found at:
app/design/frontend/base/default/template/catalog/product/view/media.phtml
Assuming that you have the default Magento file structure.

Step Two

Locate the code that we will be editing (on or around line 73 in media.phtml) and replace it with the replacement code below. Thats it!

Original Code:

<a href="#" onclick="popWin('<?php echo $this->getGalleryUrl($_image) ?>', 'gallery', 'width=300,height=300,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes'); return false;" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>"><img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(56); ?>" width="56" height="56" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" /></a> 

Replacement Code:

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

Its tested with magento 1.5.1.0