ズーム画像jQuery

Question

私のページにズーム画像jQueryスクリプトを使用しています。 1つのイメージを表示する必要があるときにうまく動作しますが、3つのイメージがマークアップされている場合は失敗します。私は私のスクリプトを編集して、参照されたjQueryスクリプトを自分のページに何度も使用できるようにする方法を知りたい。

<div id="zoomcontainer"> 
<div class="zoomapp" id="zoomapp"> <img id="imgRecord" class="jqzoom" src="/demo-image.jpg"/> 
<div id="zoomerNav"> <a id="btn_up" href="#"></a> <a id="btn_dn" href="#"></a> <a id="btn_left" href="#"></a> <a id="btn_right" href="#"></a> <a id="btn_plus" href="#"></a> <a id="btn_minus" href="#"></a> <a id="btn_home" href="#"></a> </div> 
    </div> 

    <script type="text/javascript"> 
         $(function() { 
          $('#imgRecord') 
         .grViewer({ zoomLimit: 2, renderScale: 0.5 }) 
         .bind('load', function() { $('#zoomapp').css('background', $('#zoomapp').css('backgroundColor')); }); 
         }); 
        </script> 

Answer 1

たぶんこのことができます、次のようにhtmlと結合スクリプトは次のとおりです。代わりに `＃のimgRecord`（ID）の

$(function() { 
    $('.imgRecord').each(function(){ 
     $(this) 
      .grViewer({ zoomLimit: 2, renderScale: 0.5 }) 
      .bind('load', function() { $('#zoomapp').css('background', $('#zoomapp').css('backgroundColor')); }); 
    }); 
});