Loupe et zoom

Soyez le premier à donner votre avis sur cette source.

Vue 7 673 fois - Téléchargée 674 fois

Description

c'est une loupe avec la possibilite d'augmenter le niveau d'agrandissement en jouant de la molette

j'ai mis trois sources deux ou il suffit de passer sur une image quelconque avec une différence quand a la position de l'image qui subit le zoom et une autre avec une zone pour l'image qui subit la loupe pour cette derniere je lui ai rajouter une variante avec prechargement

Source / Exemple :


var kloupe={

mooz:1,
facteur:0,
taille:0,
element:null,

zoom:function(e){

if(kloupe.taille == 0){
kloupe.taille=document.getElementById('igmg').offsetHeight;
}
var delta = 0;
delta =((e.wheelDelta) ? e.wheelDelta/120 : -e.detail/3);

if(kloupe.taille+(kloupe.taille*(kloupe.mooz+delta))>document.getElementById('igmg').parentNode.offsetHeight){

kloupe.mooz+=((delta<0) ? -0.1 : 0.1);
document.getElementById('igmg').style.height=kloupe.taille*kloupe.mooz+'px';
kloupe.loupe(e);
}
else{
document.getElementById('igmg').style.height=document.getElementById('igmg').parentNode.offsetHeight+'px';
kloupe.loupe(e);
}
},

loupe:function(evt){

evt=evt ? evt : event

var grande_image=document.getElementById('igmg');
var igmp=kloupe.element;
var clic=grande_image.parentNode;
var dde=(navigator.vendor) ? document.body : document.documentElement;

if(kloupe.facteur == 0){
kloupe.facteur=grande_image.offsetHeight/igmp.offsetHeight;
}
var setX =evt.clientX + dde.scrollLeft;
var setY =evt.clientY + dde.scrollTop;
grande_image.style.left=-((setX-igmp.offsetLeft)*kloupe.facteur*kloupe.mooz)+(clic.offsetWidth/2)+'px';
grande_image.style.top=-((setY-igmp.offsetTop)*kloupe.facteur*kloupe.mooz)+(clic.offsetHeight/2)+'px';
},

dp:function(){

var grand=document.getElementById('igmg').parentNode;
var adj=kloupe.element;

if(grand.style.display && grand.style.display=="block"){
grand.style.display="none";
}
else{
grand.style.display="block";

var dde=document.documentElement;
var ddn=(navigator.vendor) ? document.body : document.documentElement;

if(adj.offsetLeft+grand.offsetWidth+adj.offsetWidth+20>dde.clientWidth+ddn.scrollLeft){
grand.style.left=adj.offsetLeft-grand.offsetWidth-20+'px';
}
else{ 
grand.style.left=adj.offsetLeft + adj.offsetWidth+20+'px';
}

if(adj.offsetTop+grand.offsetHeight>dde.clientHeight+ddn.scrollTop){
grand.style.top=adj.offsetTop - grand.offsetHeight + adj.offsetHeight-20+'px';
}
else{
grand.style.top=adj.offsetTop-10+'px';
}
}
},

raz:function(lui){

if(kloupe.element!=null){

if(navigator.appName.substring(0,5)=="Micro"){
kloupe.element.detachEvent('onmousewheel', kloupe.zoom);
kloupe.element.detachEvent('onmousewheel', kloupe.selecte);
kloupe.element.detachEvent('onmousemove', kloupe.loupe);
kloupe.element.detachEvent('onmouseout', kloupe.dp);
}
else{
kloupe.element.removeEventListener("mousemove", kloupe.loupe, false);
kloupe.element.removeEventListener("mouseout", kloupe.dp, false);

var elmouse=((navigator.userAgent.indexOf("Firefox") != -1) ? 'DOMMouseScroll' : 'mousewheel');
kloupe.element.removeEventListener(elmouse, kloupe.zoom, false);
kloupe.element.removeEventListener(elmouse, kloupe.selecte, false);
}
}

kloupe.element=lui;

var adi=document.getElementById('igmg');
adi.src=lui.src
kloupe.facteur = 0;
kloupe.taille=0;
kloupe.mooz=1;
adi.style.height=lui.offsetHeight*4+'px';

if(navigator.appName.substring(0,5)=="Micro"){
lui.attachEvent('onmousewheel', kloupe.zoom);
lui.attachEvent('onmousewheel', kloupe.selecte);
lui.attachEvent('onmousemove', kloupe.loupe);
lui.attachEvent('onmouseout', kloupe.dp);
}
else{

lui.addEventListener("mousemove", kloupe.loupe, false);
lui.addEventListener("mouseout", kloupe.dp, false);

var elmouse=((navigator.userAgent.indexOf("Firefox") != -1) ? 'DOMMouseScroll' : 'mousewheel');
lui.addEventListener(elmouse, kloupe.zoom, false);
lui.addEventListener(elmouse, kloupe.selecte, false);
}
kloupe.dp();
},

selecte:function (ev){
(navigator.appName.substring(0,3)=="Mic") ? event.returnValue = false : ev.preventDefault();
}

}

Conclusion :


diiiiinnnng daaaannnng doooonnnng

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

@karamel
Messages postés
1716
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
22 septembre 2019
47 -
hpfx

j'ai mis le script a jour et j'y ai rajouter les ligne de code afin de prendre en conpte les decalages
hpfx
Messages postés
22
Date d'inscription
vendredi 29 août 2003
Statut
Membre
Dernière intervention
18 novembre 2007
-
salut,
pour ceux qui ont un probleme de décallage, voici comment j'ai corrigé ce probleme dans faire de bidouille,
j'ai avant tout ajouté une fonction qui calcule réellement la position de l'image :

FindXY:function(obj) //donnes les coordonnées d'un objet sur la page
{
var x=0,y=0;
while (obj!=null)
{
x+=obj.offsetLeft-obj.scrollLeft;
y+=obj.offsetTop-obj.scrollTop;
obj=obj.offsetParent;
}
return {x:x,y:y};
},

et ensuite, dans la fonction loupe, j'ai modifié lesderniere ligne ainsi :
(c'est pas optimisé pour que ca puisse être comprehensible)

var o=kloupe.FindXY(igmp);
var PosX=evt.clientX+dde.scrollLeft; // position XY de la souris dans la page
var PosY=evt.clientY+dde.scrollTop;
var dx=PosX-o.x; // position relative dans l'image
var dy=PosY-o.y;
grande_image.style.left=-((dx)*kloupe.facteur*kloupe.mooz)+(clic.offsetWidth/2)+'px';
grande_image.style.top=-((dy)*kloupe.facteur*kloupe.mooz)+(clic.offsetHeight/2)+'px';

on pourait ameliorer ceci en ne lancant FindXY() qu'une seule fois (sauf si l'image se deplace une fois la page chargée...)
hic8716
Messages postés
16
Date d'inscription
mercredi 30 avril 2008
Statut
Membre
Dernière intervention
28 juillet 2011
-
Bonjour tout le monde,
J'ai fait une petite page permettant de réaliser un un thumbnail d'images, et j'aimerais bien intégrer ce code pour permettre de zoomer sur les vignettes d'images mais je n'arrive pas. Si quelqu'un à une idée elle sera la bienvenue, voici le code source de ma page :

<html>
<head>
<title>HTML5:Palette d'images </title>

<STYLE TYPE="text/css">
<!--
TD{font-family: Arial, Helvetica, sans-serif; font-size: 8pt;}
--->
</STYLE>

<style type="text/css">
<!--

.bandehaute {
//fond de la bande
background-color: #7B7B7B; //couleur grise
background-position: 0px -545px;
//sépare le contenu d'un élément de sa bordure gauche.
padding-left: 10px;
font-weight: bold;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 1px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
//la couleur de la bordure
border-top-color: #B06C27;
border-bottom-color: #B06C27;
//la taille du titre
font-size: 12px;
}
.remplissage {
margin: 0px;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 10px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}

.bordure {
border: 1px solid #cccccc;
}

.images { //choisir les dimensions des vignettes
height:150px;
width:150px;
border:0px;
margin:15px 15px 0 0;

}
-->
</style>

<style type="text/css">

table, td
{
border-color: #7B7B7B;
border-style: solid;
}
</style>

<script>
//la fonction permettant de selectionner les images
function SelectionImage(mesFichiers) { for (var i 0, f; f mesFichiers[i]; i++) {
var imageReader = new FileReader();
imageReader.onload = (function(fichier) {
return function(e) {
var span = document.createElement('span');
span.innerHTML = [''].join('');
document.getElementById('thumbs').insertBefore(span, null);
};
})(f);
imageReader.readAsDataURL(f);
}
}
//fonction qui permet de déposer les images
function deposer(e) {
SelectionImage(e.dataTransfer.files);
e.stopPropagation();
e.preventDefault();
}

</script>

</head>

<center>
<!-- width largeur de la bande, largeur du bord
- cellpadding : Spécifie l'espace en pixels entre la bordure et le contenu de la cellule du tableau
- cellspacing : Spécifie l'espace en pixels entre les cellules du tableau -->
<!-- placement du titre a gauche -->
Palette miniatures d'images,

----

<!-- //aligner les images du gauche à droite -->
<output id="thumbs"></output>,

----

<!-- //bouton parcourir avec choix multiple -->
Glisser-déposer ou choisir des images :

</center>

</html>
ScriWeb
Messages postés
3
Date d'inscription
vendredi 27 août 2010
Statut
Membre
Dernière intervention
17 juin 2011
-
Bonjour,

Merci pour ce script excellent qui correspond exactement à ce que je cherchais.
Je l'ai testé sur un site en construction.
J'ai un problème avec une photo en mode paysage. La loupe ne prend qu'une partie de l'image. je vais essayer d'être claire dans mon explication : je mets mon curseur sur la droite de mon image et la fenêtre de zoom reste blanche. Si je décale mon curseur vers la gauche, je commence à voir apparaitre mon image lorsque le curseur atteint à peu près la moitié. Par contre le zoom qui apparait correspond à la bordure de droite de mon image. C'est décalé quoi.
Je ne connais pas le javascript alors je n'ai pas trouvé où je pouvais modifier quelque chose pour qu'ils puisse aller au delà de 100px de largeur si j'ai bien compris, le pb doit se trouver là...
voici ma page de test : http://www.recherches-ancetres.com/prestations-tarifs2.php

Merci beaucoup.
Véronique.
@karamel
Messages postés
1716
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
22 septembre 2019
47 -
il peut y avoir aussi les bordures quoi qu'il en soit dans la fonction loupe il y a ces deux lignes

grande_image.style.left=-((setX-igmp.offsetLeft)*kloupe.facteur*kloupe.mooz)+(clic.offsetWidth/2)+'px';
grande_image.style.top=-((setY-igmp.offsetTop)*kloupe.facteur*kloupe.mooz)+(clic.offsetHeight/2)+'px';

on peut modifier le decalage si par exemple je fait un decalage de 10 pixel vers la droite et le bas ca donne sa

grande_image.style.left=-((setX-igmp.offsetLeft+10)*kloupe.facteur*kloupe.mooz)+(clic.offsetWidth/2)+'px';
grande_image.style.top=-((setY-igmp.offsetTop+10)*kloupe.facteur*kloupe.mooz)+(clic.offsetHeight/2)+'px';

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.