JQzoom - 更改圖像源后，縮放Picure不可移動

Question

我正在使用JQuery來縮放我的網站上的圖像。 我還創建了一些圖標，如果單擊它，將更改圖像以進行縮放。 不幸的是，在圖像更改后，縮放的圖像不再可移動。 我只能在縮放窗口中看到圖像的頂部。 但當我向下移動鼠標時，沒有任何反應。 有誰知道，我做錯了什么？

這是我通過單擊其中一個圖標調用的java腳本函數的源代碼：

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