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 737×578 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 48×48

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 48×48). 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"));
    });
});