Javascript et rafraichissement
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. :aie:
Quelqu'un à t-il une solution?
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
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
