Effet loupe sur image multiple

Signaler
Messages postés
20
Date d'inscription
mardi 4 février 2003
Statut
Membre
Dernière intervention
23 juin 2013
-
Messages postés
694
Date d'inscription
lundi 5 décembre 2005
Statut
Membre
Dernière intervention
8 janvier 2014
-
Salut les pros

j'ai un site qui doit présenter un produit avec 3 vues.
Pour changer l'image j'ai mis un code simple :

<script language="javascript">
function ChangeImage(url) {
document.getElementById("image").src = url;
}
</script> 


et pour faire le zoom j'utilise
<script src="js/jquery.imageLens.js" type="text/javascript"></script>

<script type="text/javascript" language="javascript">
$(function () {
$("#image").imageLens();
});	
</script> 


Le souci est que lorsque je clique pour changer l'image (en image- 2 par exemple) l'effet du zoom reste sur la première image appelée



quelqu'un aurait il une idée pour que l'effet de zoom prenne en compte le click et donc adapte l'image à aggrandir?
D'avance merci.

3 réponses

Messages postés
706
Date d'inscription
mercredi 17 novembre 2004
Statut
Membre
Dernière intervention
29 septembre 2013

Bonjour,

Peux-tu coller le code de ta fonction imageLens() parce qu'en théorie il n'y a pas de raison pour que ca ne passe pas, le DOM est bien raffraichi avec le changement de source donc il n'y a pas de raison oO

-------------
Mon blog technique: [www.codeyourweb.org www.codeyourweb.org]
HTML5 / CSS3 / JS - Intégration des technologies du web a destination des nouvelles plateformes et nouveaux usages d'internet
Messages postés
20
Date d'inscription
mardi 4 février 2003
Statut
Membre
Dernière intervention
23 juin 2013

merci pour ta réponse voila le code du js moi je n'y vois rien de particulier mais j'y connais pas grand chose ^^

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

        var defaults = {
            lensSize: 200,
            borderSize: 1,
            borderColor: "#009C00"
        };
        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();

            var target = $("
 
").appendTo($(this).parent());
            var targetSize = target.size();

            var imageSrc = options.imageSrc ? options.imageSrc : $(this).attr("src");
            var imageTag = "";

            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);
Messages postés
694
Date d'inscription
lundi 5 décembre 2005
Statut
Membre
Dernière intervention
8 janvier 2014
13
Le code de ce composant ne prévoit pas le changement d'image, tout est construit en dur.
Il faut modifier le composant, lui rajouter une fonction setImage(imageSrc) qui reprendra une partie de éléments initialisés par le module pour le faire fonctionner avec une nouvelle image comme par exemple le :
-
 target.css({ backgroundImage: "url('" + imageSrc + "')" });

- le calcul des nouvelles dimensions
            var imageTag = "";

            var widthRatio = 0;
            var heightRatio = 0;

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