Zoom overpasses the limit

[mauro-balades]

you can go as much as you want by zooming out even tho the scrolling bar says it is at its limit.

[andimeier-ch]

Same problem for me. Is there a way to define a minmial Ratio? (like the maxRatio parameter)

[daveherman71]

For me this issue only seems to occur with the option fill: "contain" and you click the zoomer buttons (the slider seems to behave itself).

This is how I accomplished the minimum ratio check.

First: Define a function that will check to see if we are below the minimum ratio or not.

const checkMinRatio = (instance) => {

  let minRatio = 1,
    currentRatio = instance.ratio,
    zoomerIn = document.querySelector(instance.options.zoomer.inEl),
    zoomerOut = document.querySelector(instance.options.zoomer.outEl);

  if (currentRatio >= minRatio)
  {
    // Change the cursor from default to move
    instance.element.style.cursor = currentRatio > minRatio ? "move" : "default";

    // Clicking the zoomer button is async so set it's disable state later
    setTimeout(function() {
      if (currentRatio <= minRatio) zoomerOut.classList.add("zoomist-zoomer-disable");
      else zoomerOut.classList.remove("zoomist-zoomer-disable");
    }, 1);
  }
  else
  {
    // Zoom back up to the minRatio
    instance.zoomTo(minRatio);
  }
}

Then: Initialize Zoomist so that the ready and zoom events call the function, for example:

new Zoomist(".imageZoom", {
  fill: "contain",
  height: 400,
  maxRatio: 8,
  wheelable: false,  // Disabled to prevent zooming while scrolling the page
  slider: {
    el: ".imageZoom-slider",
    direction: "horizontal"
  },
  zoomer: {
    inEl: ".imageZoom-zoomer--in",
    outEl: ".imageZoom-zoomer--out",
    disableOnBounds: true
  },
  on: {
    ready() { checkMinRatio(this); },
    zoom(ratio) { checkMinRatio(this); }
  }
});

Hope this helps.