Discussion :

[Lost In Translation]

Bonjour,

J'explique mon problème qui semble en être un pour le monde entier, espagnol, américain, français et bien d'autres... ça serait pas trop mal que nous essayons de le résoudre ensemble.

Il existe un effet de galerie graphique simple à implémenter nommé Mooflow

Il peut être couplé avec des effets d'ouvertures d'images, reste fluide et marche sur tous les navigateurs. Bref, il est basé sur le framework Mootools 1.2.

Le soucis est que l'ouverture de l'image principale (celle en avant) ne se fait que par un double click. C'est problématique vu que sur le web, les utilisateurs sont habitués au click simple. Et pour peu que le site qui l'utile soit un peu "standing", c'est toujours bien d'éviter le "double cliquez pour ouvrir les images".

Je n'ai pas les connaissances suffisantes en JavaScript pour me lancer dans une telle modif, surtout que je ne trouve pas le problème, mais je vais l'expliquer.

La fonction qui permet d'ajouter un effet sur une image s'appelle "OnClickView". J'ai cherché dans le code du plugin Mooflow, mais hormis une instanciation du style "onclickview : $empty" , il n'y a rien d'autre.

J'ai parcouru le code à la recherche d'un potentiel truc qui ressemblerait à "double click" et je n'ai rien trouvé encore.

J'ai donc supposé que c'était quelque chose d'appartenant à Mootools (1.2)... et je n'ai rien trouvé non plus.

J'ai donc contacté en dernier recours le créateur... mais il ne m'a pas répondu...

Bref... plusieurs semaines que je suis dessus, et je commence à m'arracher les cheveux. Quelqu'un aurait une idée ?

[Brian]

Salut,

J'ai rencontré le même problème que toi en ce qui concerne le double click.

Tu dois remplacer la ligne suivante (ligne 151)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

img.addEvents({'click': this.clickTo.bind(this, i), 'dblclick': this.viewCallBack.bind(this, i)});

par :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
img.addEvents({'click': this.clickTo.bind(this, i), 'click': this.viewCallBack.bind(this, i)});

Chez moi ça marche parfaitement.

En espérant t'avoir aidé,

Brian.

[bolbolebo]

Malheureusement,

Quand on opère ainsi, on ne peut plus naviguer dans le mooFlow en cliquant sur les images en arrière-plan : il faut obligatoirement passer par la barre de défilement, ce qui est gênant quand on souhaite une interface épurée (seulement les images dans mon cas)

Quelqu'un saurait-il comment modifier le DblClick en simple clic sur la première image SEULEMENT ?

[vermine]

Bonjour,

Vous pourriez reprendre le même principe et insérer une condition sur l'id de la première image dans le second clic.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
img.addEvents({'click': this.clickTo.bind(this, i), 'click': /* IF PREMIERE IMAGE */ this.viewCallBack.bind(this, i), 'dblclick': this.viewCallBack.bind(this, i)});

[cliffordsean]

bonjour

je viens d'essayer la derniere solution et ca ne marche pas pour moi


il y a une autre solution ?


merci
sean

[vermine]

Bonjour et bienvenue,

Pourriez-vous nous en dire un peu plus parce que depuis l'ouverture de cette discussion, les version de MooTools se sont succédées et il y a pas mal de changements.

Montrez-nous un peu de code par la même occasion, en réexpliquant où ça coince chez vous.

Si par contre vous sentez que ça ne correspond pas tout à fait à la discussion d'origine, n'hésitez pas à ouvrir votre propre discussion.

[cliffordsean]

merci pour la response super rapide !

ma version est :
MooTools Core 1.4.5
MooFlow 0.2.1


je cherche a changer MooFlow :

Clic simple sur l'image principale : ouverture du lien
Clic simple sur les images secondaires : fait venir cette image en premier plan



Tnx
sean

ps desolee francais n'est pas ma langue maternelle

[vermine]

Vous pouvez me montrer votre code ? Car Mooflow 0.2.1 est fait pour MooTools 1.2 donc je ne sais pas trop si c'est compatible avec la dernière version de MooTools.

[cliffordsean]

C'est ici :

http://openvq.com/nextgen/
Pour accéder test:test

Merci beaucoup,
sean

[vermine]

Vu que l'on attaque directement le code de Mooflow, je propose qu'on évite les effets de bords en ajoutant une sorte de patch. Nous allons ajouter quelques lignes dans le fichier Mooflow.js.

1) Créer une variable témoin qui sera initialisée avec l'indice de l'image qui est l'image principale au chargement de la page. Chez vous c'est l'image "Revenue" d'indice "1". Dans la méthode initialize, on rajoute une variable "this.lastPicture" :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
initialize: function(element, options){
		this.MooFlow = element;
		this.setOptions(options);
		this.foc = 150;
		this.factor = this.options.factor;
		this.offY = this.options.offsetY;
		this.isFull = false;
		this.isAutoPlay = false;
		this.isLoading = false;
		this.inMotion = false;
		this.lastPicture = 1;

2) On modifie l'événement click sur les images pour pointer sur une autre fonction. On remplace cette ligne :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

img.addEvents({'click': this.clickTo.bind(this, i), 'dblclick': this.viewCallBack.bind(this, i)});

Par celle-ci qui fait intervenir la nouvelle fonction clickToOrGoTo :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
img.addEvents({'click': this.clickToOrGoTo.bind(this, i), 'dblclick': this.viewCallBack.bind(this, i)});

3) On définit la fonction clickToOrGoTo, par exemple après la fonction clickTo :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
clickTo: function(index){
    if(this.index == index) return;
    //this.aniFx.cancel();
    if(this.sli) this.sli.set(index);
    this.glideTo(index);
},
// Nouvelle fonction
clickToOrGoTo: function(index){
    // Si l'image précédemment cliquée égale la nouvelle image cliquée
    if(index == this.lastPicture)
    {  // Alors on simule le double clic
        this.lastPicture = index;
        this.viewCallBack(index);
    }
    else  // Sinon on a changé d'image et elle devient l'image principale
    {
        this.lastPicture = index;
        this.clickTo(index);
    }
  },

[cliffordsean]

super - wow - merci !

[vermine]

Au plaisir.

Normalement il ne devrait pas y avoir d'effet de bords mais quand on touche à une bibliothèque toute faite, on n'est jamais sûr de rien.

[vermine]

Haha. Pas trop vite. Il reste le cas de la molette de la souris.

Je vais regarder ce que l'on peut faire de ce côté-là.

[vermine]

Pour gérer la molette de la souris, vous pouvez remplacer ces deux fonctions :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
prev: function(){
    if(this.index > 0) this.clickTo(this.index-1);
},
next: function(){
    if(this.index < this.iL) this.clickTo(this.index+1);
},

Par celles-ci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
prev: function(){
    if(this.index > 0) this.clickToOrGoTo(this.index-1);
},
next: function(){
    if(this.index < this.iL) this.clickToOrGoTo(this.index+1);
},