Effet loupe sur image multiple
Arobaskette
Messages postés
18
Date d'inscription
mardi 4 février 2003
Statut
Membre
Dernière intervention
23 juin 2013
-
17 juin 2013 à 17:10
cs_AlexN Messages postés 694 Date d'inscription lundi 5 décembre 2005 Statut Membre Dernière intervention 8 janvier 2014 - 18 juin 2013 à 16:10
cs_AlexN Messages postés 694 Date d'inscription lundi 5 décembre 2005 Statut Membre Dernière intervention 8 janvier 2014 - 18 juin 2013 à 16:10
3 réponses
shadow1779
Messages postés
706
Date d'inscription
mercredi 17 novembre 2004
Statut
Membre
Dernière intervention
29 septembre 2013
17 juin 2013 à 23:23
17 juin 2013 à 23:23
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
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
Arobaskette
Messages postés
18
Date d'inscription
mardi 4 février 2003
Statut
Membre
Dernière intervention
23 juin 2013
18 juin 2013 à 07:33
18 juin 2013 à 07:33
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);
cs_AlexN
Messages postés
694
Date d'inscription
lundi 5 décembre 2005
Statut
Membre
Dernière intervention
8 janvier 2014
19
18 juin 2013 à 16:10
18 juin 2013 à 16:10
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 :
-
- le calcul des nouvelles dimensions
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());
