问题
I'm using the JQuery to zoom images on my web site. I also created some Icons that will change the image to zoom if I click on it. Unfortunately after the Image change, the zoomed image is not moveable anymore. I can only see the top of the image in the zoom window. But when I move the mouse down, nothing happens. Does anyone know, what I did wrong?
Here is my source code for the java script function that is called by clicking on one of the icons:
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);
}
The Image to zoom is implemented like that:
<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>
Thanks and best regards.
回答1:
You should clean the data from jQZoom before changing image source:
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');
}
来源:https://stackoverflow.com/questions/17163736/jqzoom-zoom-picure-not-moveable-after-changing-image-source