Publicité
+ Répondre à la discussion
Affichage des résultats 1 à 10 sur 10
  1. #1
    Responsable Développement Web

    Avatar de Bovino
    Homme Profil pro Didier Mouronval
    Développeur Web
    Inscrit en
    juin 2008
    Messages
    22 029
    Détails du profil
    Informations personnelles :
    Nom : Homme Didier Mouronval
    Âge : 44
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : juin 2008
    Messages : 22 029
    Points : 80 658
    Points
    80 658

    Par défaut Déplacement dans une image style Google Maps.



    Vous avez tous vu une carte Google : on clique sur la carte pour la déplacer et le déplacement est synchronisé sur une petite vignette.

    C'est le script que je vous propose ajourd'hui avec une image.

    Le code n'est pas commenté car je compte faire un tuto pour en expliquer les principes et le fonctionnement.

    Du coup, n'hésitez pas à me rapporter les bugs que vous pourriez constater
    Il en reste un gros que j'ai du mal à résoudre : sur certains navigateurs, si l'on clique sur la partie cachée de l'image, celle-ci se sélectionne...

    Le code :
    Code :
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    var Clipper = function(tgtImg,opts){
    	this.image = this.getConteneur(tgtImg);
    	if(!this.image){
    		return false;
    	}
    	var that = this;
    	this.haveThumb = opts.haveThumb && this.initThumb(opts.thumbId);
    	this.speed = opts.speed || 1;
    	this.currentX = 0;
    	this.currentY = 0;
    	this.minX = this.image.parentNode.clientWidth - this.image.width;
    	this.minY = this.image.parentNode.clientHeight - this.image.height;
    	this.origX = 0;
    	this.origY = 0;
    	this.image.parentNode.onmousedown = function(e1){
    		var evt = window.event || e1;
    		that.origX = evt.clientX;
    		that.origY = evt.clientY;
    		that.image.onmousemove = function(e2){
    			var evt2 = window.event || e2;
    			var dX = (evt2.clientX - that.origX) * that.speed;
    			var dY = (evt2.clientY - that.origY) * that.speed;
    			dX += that.currentX;
    			dY += that.currentY;
    			dX = Math.min(dX,0);
    			dX = Math.max(dX,that.minX);
    			dY = Math.min(dY,0);
    			dY = Math.max(dY,that.minY);
    			that.currentX = dX;
    			that.currentY = dY;
    			that.origX = evt2.clientX;
    			that.origY = evt2.clientY;
    			that.image.style.marginLeft = dX + 'px';
    			that.image.style.marginTop = dY + 'px';
    			if(that.haveThumb){
    				that.cadre.style.left = (Math.abs(dX/that.ratioX)-3)+'px';
    				that.cadre.style.top = (Math.abs(dY/that.ratioY)-3)+'px';
    			}
    		};
    	};
    	this.image.onmouseup = function(){
    		that.image.onmousemove = null;
    	};
    	this.image.onmouseout = function(){
    		that.image.onmousemove = null;
    	};
    	this.image.ondragstart = function(){return false;};
    };
    Clipper.prototype.getConteneur = function(conteneur){
    	if(conteneur.tagName){
    		return conteneur;
    	}
    	else if(typeof conteneur === 'string'){
    		return document.getElementById(conteneur);
    	}
    	else{
    		return false;
    	}
    };
    Clipper.prototype.initThumb = function(thImg){
    	this.thumb = this.getConteneur(thImg);
    	if(!this.thumb.tagName || this.thumb.tagName.toLowerCase()!=='img'){
    		return false;
    	}
    	var that = this;
    	this.thumb.parentNode.style.position = 'relative';
    	this.thumb.parentNode.style.width = this.thumb.width + 'px';
    	this.thumb.parentNode.style.height = this.thumb.height + 'px';
    	this.ratioX = this.image.width / this.thumb.width;
    	this.ratioY = this.image.height / this.thumb.height;
    	this.cadre = document.createElement('div');
    	this.cadreWidth = this.image.parentNode.clientWidth / this.ratioX;
    	this.cadreHeight = this.image.parentNode.clientHeight / this.ratioY;
    	this.refX = this.thumb.parentNode.offsetLeft;
    	this.refY = this.thumb.parentNode.offsetTop;
    	this.thumbMinX = this.refX + this.thumb.width - this.cadreWidth;
    	this.thumbMinY = this.refY + this.thumb.height - this.cadreHeight;
    	this.cadre.style.cssText = 'background-image:url(transp.gif);position:absolute;top:-3px;left:-3px;width:'+this.cadreWidth+'px;height:'+this.cadreHeight+'px;border:3px solid yellow;cursor:move;';
    	this.thumb.parentNode.appendChild(this.cadre);
    	this.cadre.onmousedown = function(){
    		that.cadre.onmousemove = function(e4){
    			var evt4 = window.event || e4;
    			var dX = Math.max(evt4.clientX - that.cadreWidth/2,that.refX);
    			dX = Math.min(dX,that.thumbMinX);
    			dX = dX - that.refX;
    			var dY = Math.max(evt4.clientY - that.cadreHeight/2,that.refY);
    			dY = Math.min(dY,that.thumbMinY);
    			dY = dY - that.refY;
    			that.cadre.style.left = (dX - 3) + 'px';
    			that.cadre.style.top = (dY - 3) + 'px';
    			that.currentX = -dX * that.ratioX;
    			that.currentY = -dY * that.ratioY;
    			that.image.style.marginLeft = that.currentX + 'px';
    			that.image.style.marginTop = that.currentY + 'px';
    		};
    	};
    	this.cadre.onmouseup = function(){
    		that.cadre.onmousemove = null;
    	};
    	this.thumb.onmouseout = function(){
    		that.cadre.onmousemove = null;
    	};
    	this.thumb.ondragstart = function(){return false;};
    	this.cadre.ondragstart = function(){return false;};
    	return true;
    };
    window.onload = function(){window.myClip = new Clipper('clip',{speed:5,haveThumb:true,thumbId:'thumbImg'});};
    En gros, il faut placer les deux images (attention aux proportions) dans des div de taille quelconque, le premier paramètre correspond à l'objet HTML contenant l'image ou à son id, puis en paramètres :
    • speed : coefficient de déplacement de l'image.
    • haveThumb : y a-t-il une vignette ?
    • thumbId : si oui, son id.

    Précision, le script se charge de créer le cadre sur la vignette en calculant les proportions de celui-ci.

    Voir une démo en ligne : http://dmouronval.developpez.com/clipper/
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  2. #2
    Expert Confirmé
    Avatar de javatwister
    Homme Profil pro
    danseur
    Inscrit en
    août 2003
    Messages
    2 733
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : danseur

    Informations forums :
    Inscription : août 2003
    Messages : 2 733
    Points : 3 079
    Points
    3 079

    Par défaut

    c'est d'une beauté époustouflante!

    et concis en plus


    comme quoi, JS a bien un avenir!

  3. #3
    Rédacteur
    Avatar de danielhagnoul
    Homme Profil pro Daniel Hagnoul
    Étudiant perpétuel
    Inscrit en
    février 2009
    Messages
    4 588
    Détails du profil
    Informations personnelles :
    Nom : Homme Daniel Hagnoul
    Âge : 64
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : février 2009
    Messages : 4 588
    Points : 16 653
    Points
    16 653

    Par défaut

    Bonsoir

    Un beau travail, je vais le garder à l'oeil

    Question bug, sous Chrome 9 lorsqu’on déplace le curseur et que l'on sort de l'image ou de la vignette il se produit souvent des effets indésirables.

    Dans un cas, j'ai déplacé le curseur sur l'image OK. Ensuite, j'ai été sur la vignette et au clic le cadre est parti se bloquer en haut à droite. J'ai dû rafraîchir la page.

    Avec Firefox 3.6.13 pas de soucis.

    Propositions de Q/R pour la FAQ jQuery

    plugin dialogModal

    Si un message vous a aidé ou vous semble pertinent, votez pour lui !

  4. #4
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur
    Inscrit en
    mars 2002
    Messages
    34 930
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 64
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2002
    Messages : 34 930
    Points : 56 746
    Points
    56 746

    Par défaut

    Ce qui est appréciable dans l'ergonomie c'est le drag sur les deux images !

    Très joli Beef

    Citation Envoyé par Daniel
    je vais le garder à l'oeil
    tu vas nous le jqueriser ?
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag


    réalisations :www.oxygen-translations.com|www.saftair.com| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  5. #5
    Modérateur
    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    7 434
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 7 434
    Points : 13 038
    Points
    13 038

    Par défaut

    Bonjour,
    je découvre la section Contribuez et me permets de faire quelques remarques constructives.

    Pour éviter la sélection lorsque l'on sort de l'image vignette, il convient de stopper l'action par défaut du document lors de ses événements mousemove, mousedown et mouseup.

    Pour ce faire, dans la fonction this.cadre.onmousedown = function(){... le blocage peut ce faire en ajoutant
    Code :
    1
    2
    3
    addEvent( document, 'mousemove', preventEvent);
    addEvent( document, 'mousedown', preventEvent);
    addEvent( document, 'mouseup',   function(){that.cadre.onmousemove=null;});
    Nul doute que tu sauras ce que représente les functions addEvent et preventEvent.

    Concernant l'ajout sur sur le mouseup c'est pour ce garantir, lorsque l'on quitte la vignette et que l'on relâche la mouse, contre la reprise du déplacement au survol de cette dernière.

    Enfin dernier point, suppression de l'annulation sur le mouseout, afin que lorsque l'on revient sur la vignette celle ci soit encore active si l'on n'a pas relâché la mouse
    Code :
    1
    2
    3
    this.thumb.onmouseout = function(){
    //that.cadre.onmousemove = null;
    };
    ...mais ce dernier point reste à l'appréciation de chacun.

    J'en ai oublié l'essentiel, Bravo pour ce script.

  6. #6
    Expert Confirmé Sénior
    Avatar de le_chomeur
    Profil pro
    Développeur informatique
    Inscrit en
    février 2006
    Messages
    3 638
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : février 2006
    Messages : 3 638
    Points : 4 218
    Points
    4 218

    Par défaut

    Bug sous chrome : si je scroll sur la grande image que je sort du cadre et reviens dedans , l'évènement est stoppé je dois re-cliquer dessus

    très beau, propre et simple
    est ton ami fait gagner du temps à ceux qui aident , donc un message avec la balise résolu laisse plus de temps pour résoudre d'autres problèmes

    Premier ministre du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts )

  7. #7
    Invité de passage
    Homme Profil pro
    Technicien maintenance
    Inscrit en
    août 2011
    Messages
    1
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Nièvre (Bourgogne)

    Informations professionnelles :
    Activité : Technicien maintenance
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : août 2011
    Messages : 1
    Points : 1
    Points
    1

    Par défaut

    Bravo pour ce script!
    Pourriez-vous me dire quels paramètres sont à modifier pour que, par exemple, le cadre de déplacement du zoom ne soit pas positionné en haut, à droite comme pas défaut dans le script mais au milieux?
    Par avance, un grand merci

  8. #8
    Responsable Développement Web

    Avatar de Bovino
    Homme Profil pro Didier Mouronval
    Développeur Web
    Inscrit en
    juin 2008
    Messages
    22 029
    Détails du profil
    Informations personnelles :
    Nom : Homme Didier Mouronval
    Âge : 44
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : juin 2008
    Messages : 22 029
    Points : 80 658
    Points
    80 658

    Par défaut

    Citation Envoyé par binary010011 Voir le message
    Bravo pour ce script!
    Pourriez-vous me dire quels paramètres sont à modifier pour que, par exemple, le cadre de déplacement du zoom ne soit pas positionné en haut, à droite comme pas défaut dans le script mais au milieux?
    Par avance, un grand merci
    Il faut jouer sur les valeurs top et left de la ligne 78
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  9. #9
    Invité régulier
    Inscrit en
    août 2011
    Messages
    29
    Détails du profil
    Informations forums :
    Inscription : août 2011
    Messages : 29
    Points : 9
    Points
    9

    Par défaut

    Bonjour Bovino,

    Ce script m'a été d'une aide très précieuse. Cependant, il y a encore deux choses que je n'arrive pas à mettre en place.

    La première chose est de pouvoir définir une position d'origine à l'image qui n'est pas top 0 et left 0 dans le sens ou, par exemple au chargement de la page, la position a afficher est recuperé en ajax. Dans votre script, si on change les valeur top et left dans le style css, c'est cette position qui sert de départ, et on ne peut plus scroll la totalité de l'image.

    La seconde chaude est de réussir à centrer cette position au milieu du div conteneur.

    J'avoue ne pas avoir compri la totalité des manipulations effectuées dans votre script, malgré des recherches assidu, je ne comprends toujours pas à quoi correspond certains calculs.

    Je dois également précisé que je n'utilise que les deux premieres methodes de votre script. Pas de miniature.

    [Edit] J'ai réussi pour la premeire parti, en modifiant les variables "current" par la position souhaiter, je check ensuite si ces variables so nt differente de zero, et si oui, je place directement l'image au bon endroit.

    Code javascript :
    1
    2
    3
     
    this.currentX = opts.posX || 0;
    this.currentY = opts.posY || 0;

    et
    Code javascript :
    1
    2
    3
    4
    5
     
           if(this.currentX !=0 && this.currentY !=0){
                that.image.style.marginLeft = this.currentX + 'px';
                that.image.style.marginTop = this.currentY + 'px';
            }

    Juste avant le onmousedown

    Je pense donc qu'a partir de là, un simple calcul devrait me permetre de centrer cette position. Je continue de chercher.

    [Edit1]Et bien j'ai réussi, en ajoutant simplement la moitié de la largeur et de la hauteur de mon conteneur aux variables current.

    Cordialement,
    Stick.

  10. #10
    Invité de passage
    Homme Profil pro
    Étudiant
    Inscrit en
    mars 2012
    Messages
    1
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Tarn et Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : mars 2012
    Messages : 1
    Points : 1
    Points
    1

    Par défaut

    Bonjour,

    Merci pour votre topic, il m'a été très utile!
    Mais j'aurais besoin d'une adaptation pour mobile et tablette... Avec cette version du clipper, on ne peut pas faire défiler les images avec les écrans tactiles. Si vous avez quelques tuyaux je suis preneur.

    Merci

Liens sociaux

Règles de messages

  • Vous ne pouvez pas créer de nouvelles discussions
  • Vous ne pouvez pas envoyer des réponses
  • Vous ne pouvez pas envoyer des pièces jointes
  • Vous ne pouvez pas modifier vos messages
  •