Bonjour

J'ai crée une galerie en javascript qui affiche successivement un suite d'images dans une division.

Pour que mon image soit centrée verticalement et horizontalement j'utilise du CSS dans mon code javascript.

Le problème est le suivant:

Les images qui défilent ne sont pas alignées verticalement.
-Si, dans le code ci-dessous, je dé commente le code "alert("test")" qui se produit à chaque changement d'image mes images se placent correctement.

Je ne comprend pas trop le problème.

Quelqu'un à t-il une solution?

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
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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
 
 
/**
 * Classe modélisant la notion de galerie d'image.
 */
 
/**
 * Crée une galerie d'image.
 * 
 * \param elementId			L'élément dans lequel la galerie charge les images.
 * \param incrementDelay	Le délai entre deux incréments de l'opacité de l'image.
 * \param incrementValue	La valeur en point de pourcentage de l'incréments de l'opacité de 
 * 							l'image.
 * \param decrementDelay	Le délai entre deux décréments de l'opacité de l'image.
 * \param decrementValue	La valeur en point de pourcentage du décréments de l'opacité de l'image.
 * \param delay				La délai durant lequel l'image reste affichée lorsque son opacité 
 * 							atteint 100%.
 * \param urlArray			Le tableau d'url d'images qui seront affichées dans l'élément.
 * \param width				La largeur de la galerie en pixels.
 * \param height			La hauteur de la galerie en pixels.
 */
function Gallery(elementId, incrementDelay, incrementValue, decrementDelay, decrementValue, delay, 
				urlArray, width, height) {
	var incrementDelay = incrementDelay;
	var incrementValue = incrementValue;
	var decrementDelay = decrementDelay;
	var decrementValue = decrementValue;
	var delay = delay;
	var urlArray = urlArray;
 
	// Récupération de l'élément HTML contenant la galerie d'image
	var element = document.getElementById(elementId);
	// Index du tableau d'URLs pointant l'image devant être affichée 
	var indexUrlArray = 0;
	// Opacité de l'image
	var opacity = 0;
	// Objet qui contiendra les images de la galerie
	var icon = new Image();
	// Division contenant la galerie
	var divGallery = document.createElement("div");
 
	// On applique le style CSS au conteneur
	divGallery.style.width = width+"px";
	divGallery.style.height = height+"px";
	divGallery.style.textAlign = "center";			// On centre l'image
	divGallery.style.border = "1px solid #000";		// Bord noir
 
	element.appendChild(divGallery);				// Ajout de la division dans l'élément
	divGallery.appendChild(icon);					// Ajout de l'image dans la division
 
 
	/**
	 * Change l'opacité de l'image contenue dans l'élément.
	 */
	var changeOpacity = function() {
		element.style.opacity = (opacity / 100);
		element.style.MozOpacity = (opacity / 100);
		element.style.KhtmlOpacity = (opacity / 100);
		element.style.filter = "alpha(opacity=" + opacity + ")";
	}
 
	/**
	 * Change l'image chargée dans un élément et lance la fonction incrementOpacity qui va
	 * augmenter progressivement l'opacité de l'image de 0 jusqu'a 100. Celle ci appellera la 
	 * fonction decrementOpacity qui va diminuer progressivement l'opacité de l'image de 100 
	 * jusqu'a 0. Puis la fonction changeIcon sera rappelée.
	 */
	var changeIcon = function() {
 
		indexUrlArray++;
 
		// Remise à 0 du compteur si l'indice est hors tableau
		if(indexUrlArray >= urlArray.length) {
			indexUrlArray = 0;
		}
 
		// Ajout de l'image dans l'élément de la page.
		icon.src = urlArray[indexUrlArray];
 
		// alert("TEST");
 
		// Applique le CSS sur le fils
		icon.style.marginTop = "-"+ (icon.clientHeight/2) +"px";
		icon.style.marginLeft = "auto";
		icon.style.marginRight = "auto";
		icon.style.position = "relative";
		icon.style.top = "50%";
 
		incrementOpacity();
	}
 
	/**
	 * Incrémente progressivement l'opacité d'une image jusqu'a ce qu'elle atteigne 100%
	 * puis appel la fonction de décrémenation après un delai.
	 */
	var incrementOpacity = function() {	
		// L'image n'est pas totalement opaque
		if(opacity < 100) {
			changeOpacity();								// On applique l'opacité sur l'image
			opacity += incrementValue;						// Incrémentation de l'opacité
			setTimeout(incrementOpacity, incrementDelay); 	// Appel récursif
		}
		// L'image est totalement opaque
		else {
			changeOpacity(100, elementId);					// Opacite de 100%
			setTimeout(decrementOpacity, delay);
		}
	}
 
	/**
	 * Décrémente progressivement l'opacité d'une image jusqu'a ce qu'elle atteigne 0% puis appel
	 * de la fonction changeIcon().
	 */
	var decrementOpacity = function() {
		// Appel récursif jusqu'a ce que l'image soit transparente
		if(opacity > 0) {
			changeOpacity(opacity, elementId);
			opacity -= decrementValue;
			setTimeout(decrementOpacity, decrementDelay);
		}
		else {
			changeOpacity(0, elementId);					// Opacite mise à 0%
			changeIcon();
		}
	}
 
	// Si la propriété prototype n'a pas été définies
	if(typeof Gallery.initialized == "undefined") {
 
		/**
		 * Lance le défilemet d'images dans le galerie.
		 */
		Gallery.prototype.run = function() {
			changeIcon();
		}
 
		// On spécifie que les methodes ont déjà été définies
		Gallery.initialized = true;
	}
}
Le lien pour tester la galerie en ligne: http://forge.info.univ-angers.fr/~bl...eles/page.html