How to disable the zoom effect on my product images?

问题

I am using Weebly to create an online store, using a template and ran into something I dislike. Every time an user clicks on a product the product page comes up and if you hover over the product's image, a zoom function is initialized. How do I disable this effect?

I have a feeling that it is something simple like display:none; but I can't seem to figure out which class or whatever is associated with it.

回答1:

The simple way is to hide the element that is placed over the image on hover via CSS:

.cloud-zoom-big,
#cloud-zoom-big {
  display: none !important;
}

.mousetrap {
  display: none !important;
}

The better way would be to disable the JavaScript, that is calculating the effect. It's located in your http://cdn2.editmysite.com/js/site/commerce-core.js at the beginning of the file. But this file is minimized, so its hard to remove the relevant code.

回答2:

It's not necessary to make any custom code changes.

The zoom is going to be based on the size of the image that you upload. So, say for example your image is 300 pixels by 300 pixels there will be no zoom. Zoom starts at about 640 pixels. So, just make sure your image is smaller than 640 pixels.

Note: If your image is 3000 pixels by 3000 pixels the zoom is going to be great! And an image that is somewhere in the middle of that is going to have about half the amount of zoom.

来源：https://stackoverflow.com/questions/38935568/how-to-disable-the-zoom-effect-on-my-product-images

标签

css

image

hover

weebly