Utilisateur:Reptilien.19831209BE1/js/zoomImage.js
Apparence
Note : après avoir enregistré vos modifications, il se peut que vous deviez forcer le rechargement complet du cache de votre navigateur pour voir les changements.
- Firefox / Safari : Maintenez la touche Maj (Shift) en cliquant sur le bouton Actualiser ou pressez Ctrl-F5 ou Ctrl-R (⌘-R sur un Mac) ;
- Google Chrome : Appuyez sur Ctrl-Maj-R (⌘-Shift-R sur un Mac) ;
- Internet Explorer : Maintenez la touche Ctrl en cliquant sur le bouton Actualiser ou pressez Ctrl-F5 ;
- Opera : Allez dans Menu → Settings (Opera → Préférences sur un Mac) et ensuite à Confidentialité & sécurité → Effacer les données d'exploration → Images et fichiers en cache.
$(document).ready(function(){
var owidth = 0;
var oheight = 0;
var lwidth = 150;
var lheight = 150;
var zoom = 2; // x2
var osrc = "";
var bgp = "";
var loupeZ = $("<li style=\"font-size:0.8em;\">Loupe <input id=\"loupeOn\" type=\"checkbox\"/><input id=\"loupeZ\" type=\"number\" step=\"0.5\" value=\"2\" min=\"1\" max=\"5\" style=\"width:50px;margin:16px 5px 2px 5px;\"/></li>");
$("#p-views ul").prepend(loupeZ);
$(".prp-page-image").css("position", "relative");
// Lorsqu'on survole le conteneur de l'image.
$(".prp-page-image").mousemove(function(e){
//window.clearTimeout(timeoutID); à améliorer
// Coordonnées de la souris sur l'image
var zoom_offset = $(this).offset();
// Calcul des coordonnées à transmettre à la loupe
var zx = e.pageX - zoom_offset.left;
var zy = e.pageY - zoom_offset.top;
var rx = Math.round(zx/$(".prp-page-image img").width()*owidth - lwidth/2)*-1;
var ry = Math.round(zy/$(".prp-page-image img").height()*oheight - lheight/2)*-1;
var px = zx - $("#loupe").width()/2;
var py = zy - $("#loupe").height()/2;
bgp = rx + "px " + ry + "px";
$("#loupe").css("top", py);
$("#loupe").css("left", px);
$("#loupe").css("background-position", bgp);
// à améliorer
/*$("#loupe").css("border", "dashed 3px #aaa");
$("#loupe").css("background-image", "");
var timeoutID = window.setTimeout(function(){
$("#loupe").css("background-image", "url('"+osrc+"')");
$("#loupe").css("border", "solid 3px #aaa");
}, 1500);*/
});
$(".prp-page-image").mouseout(function(){
if(!$('#loupe').is(":hover")){
$("#loupe").remove();
}
});
$(".prp-page-image").mouseover(function(){
if(!$('#loupeOn').is(":checked")){
return false;
}
// On calcule les dimenssions de l'image.
var image_object = new Image();
osrc = $(".prp-page-image img").attr("src");
image_object.src = osrc;
owidth = image_object.width*zoom;
oheight = image_object.height*zoom;
var loupe = $("<div id=\"loupe\" style=\"display:block;border-radius:50%;position:absolute;bottom:0;right:0;height:"+lheight+"px;width:"+lwidth+"px;border:solid 3px #aaa;background-image:url('"+osrc+"');background-repeat:no-repeat;background-size:"+owidth+"px "+oheight+"px;\"/>");
if(!$("#loupe").length){
$(".prp-page-image").append(loupe);
}
});
$("#loupeZ").change(function(){
zoom = $(this).val();
console.log("Le zoom est maintenant de "+zoom);
});
});