2012-05-23 30 views
0

我有兩個jQuery函數之一來顯示圖像的放大/細節和從縮略圖另一個兩個顯示多個圖像。它們都工作,直到您交換圖像,然後顯示新圖像,但舊圖像仍處於縮放功能。我想我也需要更新新的縮放功能,但我不知道如何去做這件事。你如何強制重載或刷新該功能?JQuery的:兩個功能放大和交換,但變焦保持原始圖像

<script type="text/javascript"> 
    jQuery(document).ready(function($){ 
    $('#image').addimagezoom() 
     magnifiersize: [300,300] 
    }); 

    jQuery(document).ready(function($){ 
    $("li.tmb-all a").click(function() { 
     var mainImage = $(this).attr("href"); //Find Image Name 
     $("#image").attr('src', mainImage); 
     return false;  
    }); 
    }) 

</script> 

相關HTML:

<div id="main_image"> 
    <img alt="available in 10 colors" id="image" itemprop="image" src="/products/440/large/custom-woven-1.jpg" width="400" /> 
</div> 
    </div> 
     <!-- no need for thumnails unless there is more then one image --> 
<ul id="product-thumbnails" class="thumbnails" data-hook> 
    <li class="tmb-all" id="tmb-440"><a href="/spree/products/440/large/custom-woven-1.jpg"><img alt="Custom-woven-wristbands-1" src="/products/440/mini/custom-woven-1.jpg" /></a></li> 
    <li class="tmb-all" id="tmb-442"><a href="/spree/products/442/large/custom-woven-2.jpg"><img alt="Custom-woven-wristbands-2" src="/products/442/mini/custom-woven-2.jpg" /></a></li> 
    <li class="tmb-all" id="tmb-439"><a href="/spree/products/439/large/custom-woven-3.JPG"><img alt="Custom-woven-wristbands-3" src="/products/439/mini/custom-woven-3.JPG" /></a></li> 
    <li class="tmb-all" id="tmb-441"><a href="/spree/products/441/large/custom-woven-4.jpg"><img alt="Custom-woven-wristbands-4" src="/products/441/mini/custom-woven-4.jpg" /></a></li> 
</ul> 

</div> 

回答

0

你可以嘗試添加點擊裏面的MAGNIFY代碼:

$('#image').addimagezoom() 
    magnifiersize: [300,300] 
}); 


$("li.tmb-all a").click(function() { 
    var mainImage = $(this).attr("href"); //Find Image Name 
    $("#image").attr('src', mainImage); 
    $('#image').addimagezoom() 
     magnifiersize: [300,300] 
    }); 
    return false;  
}); 

插件通常有辦法摧毀自己太過其中如果沒有你」 d也許能夠做到像$('#image').destroy().addimagezoom() magnifiersize: [300,300] });假設它實際上支持(檢查文檔)。

+0

優秀,所有我需要做的只是在CAL的功能,但感謝您的想法裏面的功能! –

相關問題