jjDai
Messages postés291Date d'inscriptionvendredi 21 février 2003StatutMembreDernière intervention13 mars 2015
-
2 mars 2011 à 18:58
@karamel
Messages postés1854Date d'inscriptionvendredi 9 mai 2008StatutModérateurDernière intervention 8 avril 2024
-
15 janv. 2013 à 23:37
Cette discussion concerne un article du site. Pour la consulter dans son contexte d'origine, cliquez sur le lien ci-dessous.
@karamel
Messages postés1854Date d'inscriptionvendredi 9 mai 2008StatutModérateurDernière intervention 8 avril 2024153 15 janv. 2013 à 23:37
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és22Date d'inscriptionvendredi 29 août 2003StatutMembreDernière intervention18 novembre 2007 12 août 2011 à 10:09
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és16Date d'inscriptionmercredi 30 avril 2008StatutMembreDernière intervention28 juillet 2011 27 juil. 2011 à 16:36
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 :
<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és3Date d'inscriptionvendredi 27 août 2010StatutMembreDernière intervention17 juin 2011 16 juin 2011 à 16:20
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és1854Date d'inscriptionvendredi 9 mai 2008StatutModérateurDernière intervention 8 avril 2024153 12 mai 2011 à 15:57
il peut y avoir aussi les bordures quoi qu'il en soit dans la fonction loupe il y a ces deux lignes
usualbaalrog
Messages postés2Date d'inscriptionlundi 9 mai 2011StatutMembreDernière intervention11 mai 2011 11 mai 2011 à 15:08
Merci d'avoir répondu mais je débute, et le conteneur ? tu parles du menu et ses sous menus ? mon menu est ni en position absolute ou en position relative j'ai laissé le paramètre par défaut car le site ce décalais complétement si je mettais position absolute sur le sous sous menu. Sinon comment prendre en compte la pos du ou des éléments qui sont en absolute ? Dans le fichier js ?
@karamel
Messages postés1854Date d'inscriptionvendredi 9 mai 2008StatutModérateurDernière intervention 8 avril 2024153 10 mai 2011 à 14:13
c'est parce que un des elements conteneur doit etre en position absolute et il est imperatif que tous les elements conteneurs soient en position statique si je me trompe pas sa doit aussi etre bon en relative sinon il faut prendre en compte la position du ou des elements qui sont en absolute
usualbaalrog
Messages postés2Date d'inscriptionlundi 9 mai 2011StatutMembreDernière intervention11 mai 2011 10 mai 2011 à 09:05
Bonjour et merci pour ce code très pratique ! Néanmoins j'ai quelques soucis quant à l'ajout de cette loupezoom dans mon programme :( en fait je souhaiterais l'ajouter dans un sous sous menu de photos mais la case de zoom est complétement décalée et n'affiche rien. Si j'ajoute ce zoom sur la page principal hors du menu sur une photo quelconque par contre aucun soucis. Quelqu'un pourrait m'aiguiller ? dites moi pour le code je vous l'envoi en privé :)
lecurieux41
Messages postés23Date d'inscriptiondimanche 11 octobre 2009StatutMembreDernière intervention26 mars 2011 16 avril 2011 à 13:49
Excellent !
Tres bon travail, continue comme cela.
cs_Hulko
Messages postés3Date d'inscriptionmardi 22 février 2011StatutMembreDernière intervention12 mars 2011 12 mars 2011 à 12:35
Re-bonjour,
Je ne sais pas comment éditer mon "post", alors je remet un commentaire...
Merci beaucoup Kazma, ca fonctionne nickel, t`es un chef...
++ JJM
cs_Hulko
Messages postés3Date d'inscriptionmardi 22 février 2011StatutMembreDernière intervention12 mars 2011 12 mars 2011 à 12:11
Bonjour Kazma,
Merci pour la rapidité de ta réponse....
Je télécharge le zip de nouveau....
Merci
@karamel
Messages postés1854Date d'inscriptionvendredi 9 mai 2008StatutModérateurDernière intervention 8 avril 2024153 12 mars 2011 à 11:35
j'avait fait quelques oublies au niveau code j'ai modifier la chose et normalement sa devrait etre bon
cs_Hulko
Messages postés3Date d'inscriptionmardi 22 février 2011StatutMembreDernière intervention12 mars 2011 12 mars 2011 à 09:14
Bonjour a tous,
Merci Kazma, j`ai essaye ton code, il marche très bien, je vais même l`intégrer a mon site en construction....
Cependant, j`ai un petit souci, lorsque je l`intègre sur la page du site, il fonctionne, mais lorsque j`utilise la molette pour l`effet de zoom avant ou arrière, j`ai ma page, en même temps qui monte ou qui descend,donc c`est plutôt gênant, est-il possible, lorsque ma souri est sur une photo pour zoomer, d`interdire la monté ou la descente de la page....
Je suis novice, si quelqu'un se donne la peine de répondre ou de donner une solution,je suis preneur mais avec des explications simples et bien décrites....
Je vous remercie par avance.
Désolé, j`ai un clavier "qwerty", je vis a Bali...
MJJ
jjDai
Messages postés291Date d'inscriptionvendredi 21 février 2003StatutMembreDernière intervention13 mars 2015 6 mars 2011 à 10:22
Bonjour et Merci Kazma Génial c'est exactement ça.
Sur IE il y a effectivement quelques soucis, mais je vais regarder ça de mon côté.
JJDAI
@karamel
Messages postés1854Date d'inscriptionvendredi 9 mai 2008StatutModérateurDernière intervention 8 avril 2024153 5 mars 2011 à 18:20
retelecharge le zip j'y ai ajouter une source qui correspond a ce que tu cherchais mais ne fonctionne pas parfaite avec IE6 et malgre mes efforts j'ai pas reussi a le faire bien fonctionner avec ie6
jjDai
Messages postés291Date d'inscriptionvendredi 21 février 2003StatutMembreDernière intervention13 mars 2015 3 mars 2011 à 19:56
Bonjour
------------------
Merci pour les commentaire.
J'aurais une petite question :
Serait -il possible plutôt que de faire le zoom a cote de le faire réellement dans une loupe qui survolerait l'image ?
Sinon excellent ça devrait me servir.
JJDAI
JJDAI
@karamel
Messages postés1854Date d'inscriptionvendredi 9 mai 2008StatutModérateurDernière intervention 8 avril 2024153 2 mars 2011 à 21:53
j'ai ajouter des commentaire sur une des sources (louzoom_2.js) dalleur je me demande si j'ai pas un peut abuser
bonne lecture
jjDai
Messages postés291Date d'inscriptionvendredi 21 février 2003StatutMembreDernière intervention13 mars 2015 2 mars 2011 à 18:58
JJDAI
Dommage qu'il n'y ai pas de commentaire
JJDAI
15 janv. 2013 à 23:37
j'ai mis le script a jour et j'y ai rajouter les ligne de code afin de prendre en conpte les decalages
12 août 2011 à 10:09
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...)
27 juil. 2011 à 16:36
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>
16 juin 2011 à 16:20
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.
12 mai 2011 à 15:57
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';
11 mai 2011 à 15:08
10 mai 2011 à 14:13
10 mai 2011 à 09:05
16 avril 2011 à 13:49
Tres bon travail, continue comme cela.
12 mars 2011 à 12:35
Je ne sais pas comment éditer mon "post", alors je remet un commentaire...
Merci beaucoup Kazma, ca fonctionne nickel, t`es un chef...
++ JJM
12 mars 2011 à 12:11
Merci pour la rapidité de ta réponse....
Je télécharge le zip de nouveau....
Merci
12 mars 2011 à 11:35
12 mars 2011 à 09:14
Merci Kazma, j`ai essaye ton code, il marche très bien, je vais même l`intégrer a mon site en construction....
Cependant, j`ai un petit souci, lorsque je l`intègre sur la page du site, il fonctionne, mais lorsque j`utilise la molette pour l`effet de zoom avant ou arrière, j`ai ma page, en même temps qui monte ou qui descend,donc c`est plutôt gênant, est-il possible, lorsque ma souri est sur une photo pour zoomer, d`interdire la monté ou la descente de la page....
Je suis novice, si quelqu'un se donne la peine de répondre ou de donner une solution,je suis preneur mais avec des explications simples et bien décrites....
Je vous remercie par avance.
Désolé, j`ai un clavier "qwerty", je vis a Bali...
MJJ
6 mars 2011 à 10:22
Sur IE il y a effectivement quelques soucis, mais je vais regarder ça de mon côté.
JJDAI
5 mars 2011 à 18:20
3 mars 2011 à 19:56
------------------
Merci pour les commentaire.
J'aurais une petite question :
Serait -il possible plutôt que de faire le zoom a cote de le faire réellement dans une loupe qui survolerait l'image ?
Sinon excellent ça devrait me servir.
JJDAI
JJDAI
2 mars 2011 à 21:53
bonne lecture
2 mars 2011 à 18:58
Dommage qu'il n'y ai pas de commentaire
JJDAI