Image Zoom Dimensions

Question

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?

Answer 1

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 ){
                  //landscape
                  this.imageEl.style.width = (this.imageZoom*this.containerDim.width)+'px';
              } else {
                  //portrait
                  this.imageEl.style.height = (this.imageZoom*this.containerDim.height)+'px';
              }
              // [FIX END]

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

          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;
      }
)