Effet loupe sur plusieurs images

Bonjour,
je vous expose mon problème:
j'ai tenté de créer une page constituée d'une galerie d'images que je désire pouvoir agrandir lors du passage de la souris avec un effet de loupe. J'ai trouvé un script nommé "JQUERY IMAGELENS" que j'ai appliqué dans un document html après avoir chargé deux fichiers essentiels, "jquery.js" et "jquery.imageLens.js". Il m'a fallut ensuite insérer dans mon document html les lignes de code suivantes:


<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.imageLens.js" type="text/javascript"></script>

<script type="text/javascript" language="javascript">
$(function () {
$("#image1").imageLens({lensSize: 350});
});
</script>
<img id="image1" src="img-1.jpg" width="200"/></script></gras>

Si l'effet fonctionne parfaitement sur la première image, dès que je colle ces lignes de code une seconde fois (en renommant le nom de l'image pour faire apparaître la seconde), seule la première bénéficie de l'effet loupe, la seconde demeurant inactive. C'est pourquoi j'espère que l'un d'entre vous pourra m'aider afin que toutes les photos qui seront présentes dans la galerie pourront être zoomable grâce à ce script.

Je vous laisse le code du fichier "jquery.imageLens.js" en espérant que la modification à apporter pour que TOUTES les images soient zoomables se situe dans celui-ci car le code du fichier "jquery.js" est, lui, par contre terriblement long et je n'ose pas vous le communiquer ici. Un grand merci à celles et ceux qui pourront éventuellement m'aider. A très bientôt j'espère :)

"jquery.imageLens.js"

/*
http://www.dailycoding.com/

• /

(function ($) {
$.fn.imageLens = function (options) {

var defaults = {
lensSize: 200,
borderSize: 4,
borderColor: "#888"
};
var options = $.extend(defaults, options);
var lensStyle = "background-position: 0px 0px;width: " + String(options.lensSize) + "px;height: " + String(options.lensSize)
+ "px;float: left;display: none;border-radius: " + String(options.lensSize / 2 + options.borderSize)
+ "px;border: " + String(options.borderSize) + "px solid " + options.borderColor
+ ";background-repeat: no-repeat;position: absolute;";

return this.each(function () {
obj = $(this);

var offset = $(this).offset();

// Creating lens
var target = $("<div style='" + lensStyle + "' class='" + options.lensCss + "'> </div>").appendTo($(this).parent());
var targetSize = target.size();

// Calculating actual size of image
var imageSrc = options.imageSrc ? options.imageSrc : $(this).attr("src");
var imageTag = "<img style='display:none;' src='" + imageSrc + "' />";

var widthRatio = 0;
var heightRatio = 0;

$(imageTag).load(function () {
widthRatio = $(this).width() / obj.width();
heightRatio = $(this).height() / obj.height();
}).appendTo($(this).parent());

target.css({ backgroundImage: "url('" + imageSrc + "')" });

target.mousemove(setPosition);
$(this).mousemove(setPosition);

function setPosition(e) {

var leftPos = parseInt(e.pageX - offset.left);
var topPos = parseInt(e.pageY - offset.top);

if (leftPos < 0 || topPos < 0 || leftPos > obj.width() || topPos > obj.height()) {
target.hide();
}
else {
target.show();

leftPos = String(((e.pageX - offset.left) * widthRatio - target.width() / 2) * (-1));
topPos = String(((e.pageY - offset.top) * heightRatio - target.height() / 2) * (-1));
target.css({ backgroundPosition: leftPos + 'px ' + topPos + 'px' });

leftPos = String(e.pageX - target.width() / 2);
topPos = String(e.pageY - target.height() / 2);
target.css({ left: leftPos + 'px', top: topPos + 'px' });
}
}
});
};
})(jQuery);