Как обновить img src, когда src изменяется при использовании лупы js?

Question

Я использую Image Magnifier http://asp-net-by-parijat.blogspot.in/2014/09/jquery-zoom-image-on-mouseover-in.html, чтобы увеличить изображение. Он работает нормально, но я использую java-скрипт для изменения src изображения, но увеличение не обновляется при наведении, оно все еще показывает старое изображение, но изображение изменяется. Мой сценарий для изменения изображения:

function SwitchPic(a) { 
    $("#img").attr("src", a); 
    $("#example4").attr("href", a); 
} 

Мой HTML-код, где я использую Лупа расслоение плотной

<img data-toggle="magnify" id="img" style="width:288px;" alt="example4" src="~/Images/Product/abc.jpg" /> 

HTML, где я называю сценарий Java, чтобы изменить СРК картинку

<a onclick='SwitchPic("/Images/Products/xyz.jpg")'> 
    <img class="thumbnail" style="width: 128px; display:inline-block;" src="~/Images/Products/xyz.jpg" /> 
</a> 

Answer 1

Если вы посмотрите в коде увеличений, вы увидите этот инициализатор:

$('[data-toggle="magnify"]').each(function() { 
    var $mag = $(this); 
    $mag.magnify() 
}) 

Причина ваше увеличенное изображение не получает обновленную является Magnify инициализатором уже бегать и не наблюдая за какие-либо изменениями src. Вы можете это исправить, добавив ручной вызов в SwitchPic:

function SwitchPic(a) { 
    img = $("#img") 
    img.attr("src", a); 
    img.magnify() 
} 

Вот proof of concept.