Photos zoom in too much when you tap on mobile devices

Store Design
1

  • I’m having a problem with the photo gallery zoom feature on mobile devices, as it zooms in far too much when you tap on the picture and there’s no zoom out function.

    I’d like for the entire picture to be visible when it’s selected.

  • Is there a way to fix this with coding?

  • I’m using the Dawn theme.

  • My store is www.premiumpetgroomer.com

1 Like
2

@JGonet

We have checked for this issue in real system and browserstack but it is working ok. In which system configuration or browser you are checking?

3

Hello @JGonet ,

You can try to follow these steps:

Go to Online Store → Themes → Actions → Edit code

Go to Sections → product-template.liquid

Modify the code responsible for handling the tap or click event on the picture and triggering the zoom behavior like this example:

function zoomImage(image) {
  var overlay = document.getElementById("overlay");
  overlay.innerHTML = "";
  overlay.style.display = "block";
  overlay.style.position = "fixed";
  overlay.style.top = "0";
  overlay.style.left = "0";
  overlay.style.width = "100%";
  overlay.style.height = "100%";
  overlay.style.backgroundColor = "rgba(0, 0, 0, 0.8)";
  overlay.style.zIndex = "9999";
  overlay.onclick = hideOverlay;
}

function hideOverlay() {
  var overlay = document.getElementById("overlay");
  overlay.style.display = "none";
}

Save changes

Hope this can help. Let us know if you need any further support.

Ali Reviews team.

2 Likes