AFAIU Magento zoom spot size is defined via CSS (square by default). It takes a large product image and fits it in by the short side and then allows to zoom it to actual size.

So for example if I have a 200x200px spot and 900x3000px image I will only get a top square part of my image inside of the spot and the rest can be zoomed in.

Is there a chance to make it that Magento takes along side of an image for initial downsizing and displays its full length from the start filling it with white spaces to a square?


Include a Javascript file with the following contents (make sure it is loaded after product.js)

Product.Zoom.prototype.scale = Product.Zoom.prototype.scale.wrap(
      function (parentMethod, v) {
          var centerX  = (this.containerDim.width*(1-this.imageZoom)/2-this.imageX)/this.imageZoom;
          var centerY  = (this.containerDim.height*(1-this.imageZoom)/2-this.imageY)/this.imageZoom;
          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) {
              // [FIX BEGIN]: fix initial zoom on portrait size images
              /*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';

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

                  this.imageEl.style.height = (this.imageZoom*this.containerDim.width*this.containerDim.ratio)+'px'; // for safari
          } else {

          this.imageX = this.containerDim.width*(1-this.imageZoom)/2-centerX*this.imageZoom;
          this.imageY = this.containerDim.height*(1-this.imageZoom)/2-centerY*this.imageZoom;

          this.contain(this.imageX, this.imageY, this.draggable);

          return true;
  • Works like a charm! Thanks a lot! Ever thought publishing it as a community extension? – user1866453 Mar 1 '13 at 6:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.