Question

That’s basically it. I have a demo up here.

I have been going nuts for about an hour on this and I think it’s going to take some hacking on the cloudzoom file itself, but I’m not sure. CSS changes appear to be getting me exactly nowhere.

If you hover over the large image you will see what I am talking about any suggestions are super appreciated at this point.

Answer 1

Try modifying this css:

#product-image #wrap{position:relative;width:225px;margin:0 auto;}
#product-image #wrap a{position:relative;}
#product-image #wrap a img{}
.mousetrap{}

Basically, set the wrapper to match the image size, then center it. I removed all the extra margin and positioning css and it seems to work.

---

Ok, since you are using different width images, I went ahead and modified the code. Bascially it adds a left margin minus the left border width of the image. This change was at line 282, with one line added before it:

cm = (parseInt(sImg.css('margin-left'),10) - parseInt(sImg.css('border-left-width'),10)) + 'px';

// Attach mouse, initially invisible to prevent first frame glitch
lens = jWin.append(format("<div class = 'cloud-zoom-lens' style='display:none;z-index:98;position:absolute;width:%0px;height:%1px;margin-left:%2'></div>", cw, ch, cm)).find(':last');

I posted the full code in the jsFiddle page.

I tested it locally, but I didn’t have different image widths to work with, so I can’t tell if it will work properly in all cases on your site.

To make it work, basically take the code posted in the jsFiddle and replace your current “js_cloud-zoom.1.0.2.js” file with it.