Magento Product Thumbnail Image Switcher

Here we We will see how to easily replace the default functionality of your product images (the pop-up window that displays when you click on a thumbnail below the main image) with a image swapping functionality.

So what we want to do is get rid of the default action and make the thumbnail change the larger main product image above when clicked.

Step 1:
Locate the file we are going to be working with. It can be found at:
app/design/frontend/default/default/template/catalog/product/view/media.phtml



Step 2:

Locate the code that we will be editing (on or around line 72 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=50,top=50,location=no,status=yes,scrollbars=yes,resizable=yes'); return false;">
   <!--nested img tag stays the same-->
</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;">
   <!--nested img tag stays the same-->
</a>

Hope it Helps! Thanks..