elevate Zoom.jsの実装に関して

Question

こんにちは。
現在運営しているサイトの画像にelevate zoom(http://www.elevateweb.co.uk/image-zoom)
を実装したいと思い、実装するまでは至ったのですが、
ギャラリーの画像を切り替えてからの挙動がおかしいので質問させていただきます。

◎サイトの構造
・画像のパスは自動生成（商品のIDなどで作っているため）
・商品ページには画像（大）１枚、大の下に（小）が1+α枚（商品に応じて異なる）
・現在はクリックで画像を切り替えることができ、小画像をクリックすると大画像ポジションに表示される。

という仕組みで、現在起こっている問題は、

・小画像をクリックして大画像ゾーンに表示させると、ズーム機能が反映されるが、その後そのまま固定されてしまい、１度しか切り替えができない。(画像切り替えが効かない）
・ページ読み込み直後、大画像上にマウスを持っていってもズーム機能が動作しない。

という状況です。一部ソースを貼りますので詳しい方いらっしゃいましたらアドバイスいただけると幸いです。

よろしくお願い致します。

<script src="/******/js/jquery.elevatezoom.js" type="text/javascript"></script> <div class="detail_wrapper_left"> <div id="product_img"> <img id="product_large_image" class="large" src="@(imageUrl)?@ViewBag.RCC" data-image-source="@imageUrl" alt="" / data-zoom-image="@(imageUrl)?@ViewBag.RCC"> </div> <div> @if(descriptionImages.Count() > 0) { foreach(var descImage in descriptionImages) { string imgPath = string.IsNullOrEmpty(descImage.FilePath)? "product/item/images/"+ descImage.ProductId +"/Description/"+ descImage.ViewOrder: descImage.FilePath; imgPath = GenLinkUri(imgPath, "~/"); <img class="thmbnail" src="@(imgPath)?@ViewBag.RCC" alt="" /> }} </div> <script type="text/javascript" defer> $(function(){ $('.thmbnail').bind("click", function(){ $("#product_large_image").attr('src', $(this).attr('src')); $("#product_large_image").attr('data-zoom-image', $(this).attr('src')); $("#product_large_image").elevateZoom({ zoomWindowWidth:320, zoomWindowHeight:320, zoomWindowFadeIn: 500, zoomWindowFadeOut: 500, lensFadeIn: 500, lensFadeOut: 500 }); // $(function() { }, function(){ /* $("#product_large_image").attr('src', $("#product_large_image").attr('data-image-source')); */ } ); }); }); </script>