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

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

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


javascript html jquery zooming jqzoom
person Del    schedule 18.06.2013    source источник

Ответы (1)


arrow_upward
4
arrow_downward

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