Utilisateur:Reptilien.19831209BE1/js/zoomImage.js

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);
	});
});