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

Question

Я использую 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); 
} 

масштаб изображения осуществляется так:

<a class="main-image" href="Picture1.jpg" id="main-image-zoom" title="Zoom"> 
<img id="main-image-js" src="Picture1.jpg" width="380" style="display: inline; cursor: pointer;"></a> 

Спасибо и с наилучшими пожеланиями.

Answer 1

Вы должны очистить данные от 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'); 
}