Discussion :

[DevilYann]

Bonjour à tous,

J'ai une galerie de miniatures d'images et lors du clic, l'image grand format s'affiche dans un cadre à côté des miniatures.
J'ai développé ceci en javascript et en ajax car j'avais besoin de récupérer des informations en base pour chaque image.
Cela marche sans problème.

Toutefois j'aimerai avoir une transition entre deux images lors du clic. Du style l'image précédente disparait au fur et à mesure et inversement pour la nouvelle image.
J'ai essayé avec ceci pour diminuer la transparence :

Code :

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

new Effect.Opacity('image', {duration:1, fps:25, from:1.0, to:0.0})

Mais la fonction est asynchrone et la nouvelle image est déjà affichée pendant la transition.

il y a t'il une solution élégante à mettre en place pour réaliser ce genre d'animation ?

Merci d'avance

[gwyohm]

Salut,

Il faudrait plus de détail sur ton code :
Pour enchaîner 2 effets, il y a plusieurs façons de faire : préciser la position dans la file des effets (queue) ou passer par les fonctions hooks mises à dispositions (afterFinish).
Cependant, avec AJAX en même temps, tu risque d'être confronté à la particularité d'être en attente de 2 événements avant de faire l'affichage : la fin de l'effet fondu et la fin de la requête AJAX... Tu n'échapperas pas alors à une variable globale d'état de tes 2 actions pour voir si tu peux ou non lancer ton effet :

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
22
23
 
var state = 0;
function affiche() {
  state++;
  if(state==2) {
    new Effect.Appear(elementid, {afterFinish:resetState});
  }
}
 
function changeImage() {
  if(state == 0) {
    new Ajax.Request(url,{
      onComplete:affiche
    });
    new Effect.Fade(elementid, {afterFinish:affiche});
  } else {
    // un changement est en cours... on peut réessayer plus tard ou avertir
  }
}
 
function resetState() {
 state=0;
}

[DevilYann]

Merci gwyohm
Tiens je te passe le code que j'ai actuellement en essayant de réfléchir à tête reposée demain à ta solution pour voir si on peut la mettre en place (sauf si tu me dis non en voyant le code)
'displayProjet()' est appelé lors du clic sur une image miniature afin d'afficher la grande image dans le div 'image'

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
22
23
24
25
26
27
28
29
30
31
 
displayProjet = function(id_real){
 
	// <-- METTRE ICI LE CODE POUR CACHER PROGRESSIVEMENT LE DIV 'IMAGE'
 
       new Ajax.Request(
		'ajax.php',
		{
			parameters :
			{
				action     : 'displayProjet',
				id_real    : id_real
 
			},
			method : 'get',
			onSuccess : function(transport)
			{
				var resultObj = transport.responseText.evalJSON(true);
 
				if(resultObj.error) alert(resultObj.error);
				else{
					$('image').innerHTML = '<img src="images/realisations/' + resultObj.categ_real + '/' + id_real + '/forget-me-not-' + resultObj.categ_real + '-1.jpg" />';
					$('legende').innerHTML = resultObj.legende_photo;
					$('img-prec').src = "images/fleche-" + (resultObj.nb_images < 2 ? "vide.png" : "gauche.jpg");
					$('img-suiv').src = "images/fleche-" + (resultObj.nb_images < 2 ? "vide.png" : "droite.jpg");
 
					// <-- METTRE ICI LE CODE POUR REAFFICHER PROGRESSIVEMENT LE DIV 'IMAGE'
				}
			}
		});
}

[gwyohm]

Bonjour,

Je pense que tu retrouveras tes petits dans l'exemple que je t'ai donné. J'ai cependant une remarque sur la façon dont est dessinée l'image :
Comme tu créées dans le innerHTML d'un élément une balise img, au final, le navigateur va refaire une requête HTTP pour obtenir l'image... dans certains cas (image volumineuse et connexion à mauvais débit, tu pourrais avoir la div qui apparait vide et l'image qui apparait d'un coup...

[DevilYann]

Je viens de tenter le coup en essayant d'adapter le code. J'ai toujours l'image qui change avant la fin du "fade". Mais bon je suis en local, pour l'instant je ne peux pas tester en vrai, mais cela devrait mieux donner me semble t'il...

Voici le code complet

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
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
 
var stateTransition = 0;
function affiche() {
	if(++stateTransition==2) new Effect.Appear('image', {duration:0.3, afterFinish:resetState});
}
 
// Affichage de l'image précédente/suivante du projet
displayNewImage = function(suiv){
 
	new Effect.Fade('image', {duration:0.3, afterFinish:affiche});
 
	var id_real = $('id_real').value;
 
	new Ajax.Request(
		'ajax.php',
		{
			parameters :
			{
				action     : 'displayNewImage',
				id_real    : id_real,
				img_cours  : $('img_cours').value,
				suiv	   : suiv
			},
			method : 'get',
			onSuccess : function(transport)
			{
				affiche();
 
				var resultObj = transport.responseText.evalJSON(true);
 
				if(resultObj.error) alert(resultObj.error);
				else{
					$('image').innerHTML = '<img src="images/realisations/' + resultObj.categ_real + '/' + id_real + '/forget-me-not-' + resultObj.categ_real + '-' + resultObj.img_cours + '.jpg" />';
					$('legende').innerHTML = resultObj.legende_photo;
					$('img_cours').value = resultObj.img_cours;
				}
			}
		});
}
 
function resetState() {
	stateTransition=0;
}

[DevilYann]

Autre petite remarque : il y a t'il bcp de différence entre new Effect.Opacity(), new Effect.Appear() et new Effect.Fade() ?
Car les 3 semblent pouvoir être utilisés dans les 2 sens (disparation/apparition)