Main aims:

+ Magento v1.4 .2 does support the image viewing with its zooming effect using Prototype framework in which users have to drag and release a zoom button in order to zoom in/out the image . I found it not a friendly effect.

+ Instead of using this, I decided to use the Featured Image Zoomer v1.5 (reference: http://www.dynamicdrive.com/dynamicindex4/featuredzoomer.htm) in which users just need to roll the mouse over the image, a zoomed image will automatically appear beside.

+ Also, users can use the mouse wheel to adjust the zoom size.

Steps to do:

1. Download and import JQuery (current version: 1.4.4) into the head section of the site.

2. Place the script featuredimagezoomer.js in your Magento script folder. My case is “[home url]/js/jquery”. Please notice that you need to remove the code jQuery.noConfict() in this script as it will terminate all the Prototype script. (An error of this is the Add to Cart button would become ‘unclickable’)

3. Open the media.phtml from the path below

[home url]/app/design/frontend/default/[your theme]/template/catalog/product/view/media.phtml

and make the following changes:

4. Place the following code in the beginning of the file to import the featuredimagezoomer.js script. The reason I put the script in this file is so that the site won’t take unnecessary time for loading this script in other pages which don’t need the zooming effect.

<script type=”text/javascript” src=”<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_JS); ?>jquery/featuredimagezoomer.js”>
</script>

<?php echo ‘
<script type=”text/javascript”>

jQuery(document).ready(function(jQuery){

jQuery(“#image”).addimagezoom({
zoomrange: [3, 10],
magnifiersize: [350,350],
magnifierpos: “right”,
cursorshade: true,
largeimage: “‘ . $this->helper(‘catalog/image’)->init($_product, ‘image’) . ‘” //<– No comma after last option!
})
})
</script>’
?>

5. In the paragraph <p class=”product-image product-image-zoom”>, make sure the image tag inside has the id=”image”.

6. In the division <div class=”more-views”>, replace the <a> inside the <li> with the following:

<a href=”#” onclick=”updateImage(‘<?php echo $this->helper(‘catalog/image’)->init($this->getProduct(), ‘image’, $_image->getFile())->resize(300); ?>’, ‘<?php echo $this->helper(‘catalog/image’)->init($this->getProduct(), ‘image’, $_image->getFile()); ?>’)” title=”<?php echo $this->htmlEscape($_image->getLabel()) ?>” ondblclick=”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;”>
<img src=”<?php echo $this->helper(‘catalog/image’)->init($this->getProduct(), ‘thumbnail’, $_image->getFile())->resize(66); ?>” width=”66″ height=”66″ alt=”<?php echo $this->htmlEscape($_image->getLabel()) ?>” />
</a>

7. Amend the code below to the last section of the file:

<script type=”text/javascript”>

function updateImage(smallImage, imageSource){
document.getElementById(‘image’).src = smallImage;

jQuery(“#image”).addimagezoom({
zoomrange: [3, 10],
magnifiersize: [350,350],
magnifierpos: “right”,
cursorshade: true,
largeimage: imageSource //<– No comma after last option!
})
}
</script>

8. The last thing to do is update the style sheet. Open the style.css, find the line below:

.product-view .product-img-box .product-image-zoom

and remove the z-index:9 from the style sheet. Without this step, even though all the code and script works fine you still won’t be able to see any thing from the front end as the CSS does not allow to.

Done. Enjoy!