JQzoom – Zoom Picure не перемещается после смены источника изображения

Я использую JQuery для увеличения изображений на моем веб-сайте. Я также создал несколько значков, которые изменят изображение для увеличения, если я нажму на него. К сожалению, после изменения изображения увеличенное изображение больше не перемещается. Я могу видеть только верхнюю часть изображения в окне масштабирования. Но когда я перемещаю мышь, ничего не происходит. Кто-нибудь знает, что я сделал не так?

Вот мой исходный код для функции java script, вызываемой щелчком по одному из значков:

function changePicture(imgSrc) { document.getElementById("main-image-js").setAttribute("src", imgSrc); document.getElementById("main-image-zoom").setAttribute("href", imgSrc); $(".zoomWrapperImage").children('img').eq(0).attr("src", imgSrc); } 

Изображение для увеличения реализовано следующим образом:

   

Спасибо и всего наилучшего.

Перед изменением источника изображения вы должны очистить данные от jQZoom:

 function changePicture(imgSrc) { cleanJqzoom(); $("#main-image-zoom").attr('href', imgSrc); $("#main-image-js").attr('src', imgSrc); initJqzoom(); } function initJqzoom() { $('.main-image').jqzoom(); } function cleanJqzoom() { // clean the data from jQZoom $('.main-image').removeData('jqzoom'); }