2012-03-30 96 views
3

我在页面上使用缩放图像jQuery脚本。当我必须显示一个图像时它工作正常,但当我在标记中注入3个不同图像时失败。我想知道如何编辑我的脚本,以便可以在页面上多次使用引用的jQuery脚本。缩放图像jQuery

HTML和绑定脚本如下所示

<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> 
+0

,而不是'#imgRecord'(ID)试图使用'.imgRecord'(CLASS) – 2012-03-30 10:53:24

+0

这是我第一次尝试修复,但没有工作,这就是为什么我发布这个。我希望这会很容易。 – gek 2012-03-30 11:10:15

+0

无法分辨您发布的.grViewer究竟是什么。 – 2012-03-30 11:39:34

回答

0

也许这会有所帮助:

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