Попытка центрировать изображение и объектив с помощью jQuery cloudzoom

Question

Вот и все.У меня есть демо вверх здесь .

Я схожу с ума в течение часа на это, и я думаю, что это займет некоторый взлом самого файла cloudzoom, но я неконечно.Изменения в CSS, похоже, ни к чему не привели.

Если вы наведете курсор на большое изображение, вы увидите, что я говорю о любых предложениях, которые в данный момент очень ценятся.

Answer 1

Попробуйте изменить этот CSS:

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

По сути, установите оболочку в соответствии с размером изображения, затем отцентрируйте его. Я удалил все лишние поля и позиционирование CSS, и это похоже на работу.

---

Хорошо, поскольку вы используете изображения различной ширины, я изменил код. В основном это добавляет левое поле минус ширина левой границы изображения. Это изменение было в строке 282, перед ней была добавлена ​​одна строка:

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');

Я разместил полный код на странице jsFiddle .

Я тестировал его локально, но у меня не было разной ширины изображения для работы, поэтому я не могу сказать, будет ли оно работать должным образом во всех случаях на вашем сайте.

Чтобы это работало, в основном возьмите код, размещенный в jsFiddle, и замените им текущий файл "js_cloud-zoom.1.0.2.js".