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