The random eclecticisms of loonytoons

Magento – product zoom for tall thin images

Current version : 1.4.2.0

While reworking a 1.3.2.3 magento template to work for magento 1.4, I had an issue on a product page where a tall thin image was not being resized correctly by the product zoom javascript. The script seemed to think that the image was small enough to fit inside the image container and so the image was not shrunk and the zoom in bar was disabled, despite the fact that around a third of the image was hidden behind the zoom bar itself.

Digging into it, it turns out that the width of an image is the main dimension used to calculate if the image is oversized or not. But as my image was tall and thin it was the hieght causing the problem and not the width.

I fixed this by simply amending the javascript in /js/varien/product.js.

In the scale function, which is around line 128, change the line that calculates the variable ‘oversize’ from this:

var overSize = (this.imageDim.width > this.containerDim.width && this.imageDim.height > this.containerDim.height);

to this:

var overSize = (this.imageDim.width > this.containerDim.width || this.imageDim.height > this.containerDim.height);

This makes sure that an image is marked as oversize if either the width or hieght exceed the container size, rather than both. Then in the if statement below, amend the first if from this:

if (this.imageDim.width > this.containerDim.width) {
     this.imageEl.style.width = (this.imageZoom*this.containerDim.width)+'px';
}

to this:

if (this.imageDim.width > this.containerDim.width) {
     this.imageEl.style.width = (this.imageZoom*this.containerDim.width)+'px';
} else if (this.imageDim.height > this.containerDim.height) {
     this.imageEl.style.height = (this.imageZoom*this.containerDim.height)+'px';
}

This then resizes the image based on the height of the image if the width is not the reason for the oversize.

Share

2 thoughts on “Magento – product zoom for tall thin images

  1. angst says:

    I found this post very useful as I worked on a customer’s site where they had tall skinny images. Thanks!

  2. Brandon says:

    Thanks so much! I thought I had a problem with the permissions in my js folder, but YOU gave me the solution. A gazillion thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *