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;
}
} |
Partager