Zoom image jQuery

Question

我在我的页面上使用了一个缩放图片的jQuery脚本。当我只需要显示一张图片时，它可以正常工作，但当我在我的标记中注入了3个不同的图片时，它就会失败。我想知道如何编辑我的脚本，以便我可以在我的页面上多次使用引用的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>

- gek

---

请尝试使用.imgRecord（CLASS）而不是#imgRecord（ID）。 - Roko C. Buljan

那是我第一次尝试修复，但没有成功，所以我才发布了这个问题。我希望它会像那样容易。 - gek

无法从您发布的内容中确定.grViewer实际上是什么。 - Mark Schultheiss

grViewer脚本的引用链接在这里：http://www.genesreunited.co.uk/_resources/scripts/jQueryExtensions/jquery.jqzoom.js.ashx?mfs=1。 - gek

Answer 1

也许这可以帮助：

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

- Rustam