How to disable the zoom effect on my product images?

Question

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.

andreas · Accepted Answer · 2016-08-13T19:10:20.057

5

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

or

.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.

edited Aug 13 '16 at 19:10

answered Aug 13 '16 at 18:21

andreas

16,357
12
72
76

I've already tried: #cloud-zoom-big {display: none !important;} and it didn't work. :( – justinpees Aug 13 '16 at 18:47
Mh for me it worked... have you also tried the class `.cloud-zoom-big` ? – andreas Aug 13 '16 at 18:55
Yes I've tried both of them. I think you are right I will try to find the Java snippet calculating the effort like you said. Any suggestions what the code would look like – justinpees Aug 13 '16 at 18:59
I have two .js files: custom.js and plugins.js – justinpees Aug 13 '16 at 19:00
Found it and updated my questions, but will be hard to remove it... have you tried the `.mousetrap` class? – andreas Aug 13 '16 at 19:01
How can I access and edit that file? Is it even possible? – justinpees Aug 13 '16 at 19:07
Also, I'm using Safari. Could this be the problem? Maybe the changes I do to css don't work on Safari? – justinpees Aug 13 '16 at 19:10
I've tried all of the different ones already they all don't work :( – justinpees Aug 13 '16 at 19:12
Safari should not be the problem. Are you sure you're editing the right CSS file? Do other (e.g. trivial) changes work? Do you have the possibility to edit the markup? Then another possibility would be to just remove the `
`
– andreas Aug 13 '16 at 19:15
I can insert the css code anywhere in the file main_style.css right? – justinpees Aug 13 '16 at 19:15
Oh wait, I think I found the right file... I'll let you know in a second – justinpees Aug 13 '16 at 19:17
1

Perfect, you helped a lot, I was looking in the wrong css file. Although all your answers should have worked but Weebly is a bit difficult at times. Thanks a lot for your help!!! <3 – justinpees Aug 13 '16 at 19:45
If you know a way to instead open the thumbnail pics in the product area instead of opening up the photos in tabs I would appreciate that as well. – justinpees Aug 13 '16 at 19:48
The line of code that I have for that is:
{{#images}}
{{{thumbnail_html}}}
– justinpees Aug 13 '16 at 19:48
I would encourage you to ask the thumbnail problem as another question. Glad I could help. – andreas Aug 13 '16 at 20:01
OMG I love you for working my brain :) I added rel="lightbox" and now o'clock the thumbnails open up in lightbox. <3 Thanks for all your help again. – justinpees Aug 13 '16 at 20:03

score 1 · Answer 2 · answered Aug 15 '16 at 22:04

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.

*This should really be marked as the correct answer,.. because it **is** the correct answer ;) — Jeffrey Kastner, Aug 30 '16 at 01:56

How to disable the zoom effect on my product images?

2 Answers2

Linked