Switching a Base image with a thumbnail in Magento - php

Question

On a custom made product view page i'm working off from there is the base image (the large one) and a list of thumbnails which are other images associated with the product in the media gallery (they are just normal images and not the defined thumbnail), what i've been tasked to to is get it so that when you click on a thumbnail it'll change the base image above
i've got that working however i have a problem, when i change the image the image it changes to is very pixelated one, the base image is 737x578 originally so i understand that if the image is smaller it'll be stretched, however the images the thumbnails came from are roughly the same size as the original base image, it's just that they have been re-sized to be 48x48
looking at information in "view image info" in Firefox shows that the image's src is coming from the magento cache (media/catalog/product/cache/1/thumbnail/48x/9df78eab33525d08d6e5fb8d27136e95/images/) and not from the original file i have in the media folder
the base image is being created like this
<a class="product-image image-zoom" id="main-image" title="<?php echo $this->htmlEscape($_product->getImageLabel()); ?>" href="<?php echo $this->helper('catalog/image')->init($_product, 'image'); ?>">
<?php
$_img = '<img src="'.$this->helper('catalog/image')->init($_product, 'image')->resize(737, 578).'" width="737" height="578" alt="'.$this->htmlEscape($_product->getImageLabel()).'" title="'.$this->htmlEscape($_product->getImageLabel()).'" />';
echo $_helper->productAttribute($_product, $_img, 'image');
?>
</a>
while the thumbnails are being generated like this
<ul id="image-list">
<?php foreach ($this->getGalleryImages() as $_image): ?>
<li>
<img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(48); ?>" width="48" height="48" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" />
</li>
<?php endforeach; ?>
</ul>
and this is the javascript i'm using to switch the images
jQuery(document).ready(function()
{
jQuery("#image-list li img").click(function()
{
jQuery("#main-image img").attr("src", jQuery(this).attr("src"));
});
});
what change would i need to make to my javascript in order to replace the base image with the original images used by the thumbnails, obviously just changing the src attribute in the tag isn't enough

Answer 1

When you click the thumbnail image, your jQuery is setting the src of the main image to the thumbnail image src (which is 48x48). A click on the thumbnail should set the main image to the large size of the thumbnail image.
So you need a way to reference the large image src from within the thumbnail image element. You can create an attribute called something like data-main-image-src inside the thumbnail image element so that you can reference that later in jQuery:
<ul id="image-list">
<?php foreach ($this->getGalleryImages() as $_image): ?>
<li>
<img data-main-image-src="<?php echo $this->helper('catalog/image')->init($_product, 'image')->resize(737, 578)?>" src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(48); ?>" width="48" height="48" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" />
</li>
<?php endforeach; ?>
</ul>
Then you would modify your jQuery like this so that you change the main image src to be the larger image:
jQuery(document).ready(function()
{
jQuery("#image-list li img").click(function()
{
jQuery("#main-image img").attr("src", jQuery(this).attr("data-main-image-src"));
});
});

Answer 2

Manishie's answer almost worked for me, I guess with version 1.9 of Magento things might be a little different. I've updated the PHP as follows:
<ul class="product-image-thumbs">
<?php $i=0; foreach ($this->getGalleryImages() as $_image): ?>
<?php if ($this->isGalleryImageVisible($_image)): ?>
<li>
<img data-main-image-src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'large', $_image->getFile())->resize(560, 393)?>" src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(75); ?>" width="75" height="75" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" />
</li>
<?php endif; ?>
<?php $i++; endforeach; ?>
</ul>
The main change is in how I've called data-main-image-src For some reason Manishie's version was calling in the src of the current main img for every thumb. Instead I've used the same method he used to call in the thumbs but called the large image instead:
data-main-image-src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'large', $_image->getFile())->resize(560, 393)?>"
The jQuery was fine I just had to update the classes being targeted:
$j(".product-image-thumbs li img").click(function(){
$j("#image-main").attr("src", $j(this).attr("data-main-image-src"));
});