How to deal with jquery magnify plugins after changing the image to magnify?

How to deal with jquery magnify plugins after changing the image to magnify?

I have a little bit issue on how to deal with jquery magnify plugins. See I have a jquery magnify plugins which I used to zoom in. I have a series of thumbnails beside the main image to hover. My issue here is when I change the image to magnify or zoom in it will keep on magnifying the first image or the default image. I need to update the content of the magnified glass every time the image changes. Here's the details of what I've done so far. Please advise me.

HTML Mark Up:
<div id="thumbimgdiv"> <ul id="listofthumbnails"> <li id="thumblist" class="thumblist" data-bind="foreach:DetailsList"> <img id="thumbnails" class="thumbnails" src="#" data-bind="attr:{ src: '/ProductImages/' + ProductImages}"/> </li> </ul> <br /> </div> <div style="float:left;margin-top:18px;margin-right:30px"> <a id="zoomimg" href="@Url.Content("/ProductImages/" + Model.ProductImage)" > <img id="origimg" class="origimg" src="@Url.Content("~/ProductImages/" + Model.ProductImage) "/></a> </div> 
jQuery Script:
<script src="~/Scripts/jquery-1.7.1.min.js"></script> <script src="~/Scripts/jquery.magnify.js"></script> <script type="text/javascript"> // Initiate hover to magnify image $(document).ready(function () { $("#origimg").magnify(); }); //Selecting thumbnails for Product Image $("#productdetailsdiv").on("click", ".thumbnails", function () { var imgsrc = $(this).attr("src"); $("#origimg").attr("src", imgsrc); $("#zoomimg").attr("href", imgsrc); // alert(imgsrc); }); </script>