Initial Magento Product Image Zoom Scale
Hi,
Magento version: Magento 1.4.1.1
Today i was facing problems with the Product.Zoom class supplied with Magento default installation. The problem was if we’re uploading a portrait image (height > width), the initial zoom level was covering the whole picture and a big part was cut off.
After digging around, the javascript line responsible for this behavior turned out to be in
/js/varien/product.js,
in the scale function specifically:
<?php
var overSize = (this.imageDim.width > this.containerDim.width && this.imageDim.height > this.containerDim.height);
this.imageZoom = this.floorZoom+(v*(this.ceilingZoom-this.floorZoom));
if (overSize) {
if (this.imageDim.width > this.containerDim.width) {
this.imageEl.style.width = (this.imageZoom*this.containerDim.width)+'px';
}
if(this.containerDim.ratio){
this.imageEl.style.height = (this.imageZoom*this.containerDim.width*this.containerDim.ratio)+'px'; // for safari
}
} else {
this.slider.setDisabled();
}
?>
As you can see from the above code, Magento only consider the product image oversized if BOTH the width and the height are bigger in dimension than the container. We’ll need to change this to an OR condition instead, so an image is considered oversized if either its width or height are bigger than the container dimensions. Futhermore, we need to handle the case for portrait images. The following mods should do just that:
<?php
var overSize = (this.imageDim.width > this.containerDim.width) || (this.imageDim.height > this.containerDim.height);
this.imageZoom = this.floorZoom+(v*(this.ceilingZoom-this.floorZoom));
if (overSize) {
if (this.imageDim.width > this.imageDim.height ){
//landscape
this.imageEl.style.width = (this.imageZoom*this.containerDim.width)+'px';
} else {
//portrait
this.imageEl.style.height = (this.imageZoom*this.containerDim.height)+'px';
}
if(this.containerDim.ratio){
this.imageEl.style.height = (this.imageZoom*this.containerDim.width*this.containerDim.ratio)+'px'; // for safari
}
} else {
this.slider.setDisabled();
}
?>
That’s about it. Any suggestions or better best practices are mostly welcomed.