En echo à un précédent article traitant de la mise en place d'une liste défilante d'image, je donne aujourd'hui une forme plus synthétisée et un peu plus propre du code. Les quelques modifications que j'ai apporté au programme Jcaroussel permettent de s'afranchir de quelques contraintes comme l'ajout manuel du nombre d'images à faire défiler.
Réduire le nombre de tableaux
Contrairement au code d'origine où lien, description, chemin de l'image sont contenus dans des tableaux différents, j'ai trouvé judicieux de tout regrouper en un seul grand tableau (tableau de tableau). Ce qui donne la chose suivante :
var imgComp = [
["chemin/image.jpg", "texte à afficher", "lien "],
["chemin/image.jpg", "texte à afficher", "lien "],
["chemin/image.jpg", "texte à afficher", "lien "]
];
Avec cette syntaxe de tableau de tableau il est plus difficile d'oublier un élément du tableau et niveau lisibilité je trouve cela plus clair.
Ajouter/Afficher les photos
L'affichage passe évidemment par une boucle, "for" ici qui scanne chaque élément du tableau que voici :
for(var i=start;i<=last;i++) {
var liItem = carousel.addItem(i, fmtItem(imgComp[imgComp.length-i][0], imgComp[imgComp.length-i][2], imgComp[imgComp.length-i][1], i-1));
}
- imgComp.length fourni la taille de mon tableau
- imgComp.length - i permet de scanner du dernier élément au premier, concretement la dernière image ajouté au tableau est affiché en premier, en bref ça inverse le sens d'affichage des vignettes.
- Les éléments de tableau imgComp[element]
-
- imgComp[imgComp.length-i][0]
- correspond au chemin de l'image à afficher
- imgComp[imgComp.length-i][1] correspond au texte/description
- imgComp[imgComp.length-i][2] correspond au lien hypertexte
Finalisation
Pour que cela fonctionne bien n'oublier pas de modifier l'élement size :
carousel = new YAHOO.extension.Carousel("dhtml-carousel",
{
numVisible: 4,
animationSpeed: 0.7,
scrollInc: 3,
navMargin: 40,
prevElement: "prev-arrow",
nextElement: "next-arrow",
loadInitHandler: loadInitialItems,
loadNextHandler: loadNextItems,
loadPrevHandler: loadPrevItems,
prevButtonStateHandler: handlePrevButtonState,
autoPlay: 3000,
size: imgComp.length,
wrap: true
}
);