Display all images

Bonjour,

Je voudrai afficher toutes les images declarees dans ma variable dans un ul.
Mon HTML:

Code:

---

<ul id="thumbs"></ul>

---

Mon JS:

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

var sliderContent = { "slides" : [ {"nom_slide": "SL #0", "thumbnail": "images/0_thumb.jpg", "image": "images/0.jpg"}, {"nom_slide": "SL #1", "thumbnail": "images/1_thumb.jpg", "image": "images/1.jpg"}, {"nom_slide": "SL #2", "thumbnail": "images/2_thumb.jpg", "image": "images/2.jpg"}, {"nom_slide": "SL #3", "thumbnail": "images/3_thumb.jpg", "image": "images/3.jpg"}, {"nom_slide": "SL #4", "thumbnail": "images/4_thumb.jpg", "image": "images/4.jpg"}, {"nom_slide": "SL #5", "thumbnail": "images/5_thumb.jpg", "image": "images/5.jpg"}, {"nom_slide": "SL #6", "thumbnail": "images/6_thumb.jpg", "image": "images/6.jpg"} ] };   var totalSlides = sliderContent.slides.length; // number of slides   function displayAllThumbs() { for( i=0 ; i < totalSlides; i++) {\ listThumbs = '<li><a href=""><img src="' + sliderContent.slides[i].thumbnail + '" alt="' + sliderContent.slides[i].nom_slide + '" title="' + sliderContent.slides[i].nom_slide + '" /></a></li>'; thumbs.innerHTML = listThumbs; } }

---

Malheureusement ce code ne m'affiche que la dernière image.
Est-ce que quelqu'un pourrait m'aider?

Merci.

Bonjour,
plusieurs maladresse dans ton code à commencer par ta boucle

Code:

---

1 2 3 4 5 6

function displayAllThumbs() { for( i=0 ; i < totalSlides; i++) {\ listThumbs = '<li><a href=""><img src="' + sliderContent.slides[i].thumbnail + '" alt="' + sliderContent.slides[i].nom_slide + '" title="' + sliderContent.slides[i].nom_slide + '" /></a></li>'; thumbs.innerHTML = listThumbs; } }

---

- thumbs est incorrectement référencé, il te faut, même si ta façon de faire peut fonctionner, récupérer la référence via un document.getElementById('thumbs') par exemple.
- comme tu affectes le innerHTML dans la boucle, en fait tu le remplaces à chaque étape de la boucle, donc au final il ne te reste que le dernier.

Voila une façon de faire

Code:

---

1 2 3 4 5 6 7 8 9

function displayAllThumbs() { var oDest = document.getElementById('thumbs'), i, nbr = sliderContent.slides.length; html = ''; for( i=0 ; i < nbr; i++) { html += '<li><a href=""><img src="' + sliderContent.slides[i].thumbnail + '" alt="' + sliderContent.slides[i].nom_slide + '" title="' + sliderContent.slides[i].nom_slide + '" /></a></li>'; } oDest.innerHTML = html; }

---

Ok je comprends bien le problème d'avoir mis mon innerHTML dans le boucle, ça ne faisait pas de sens.

Par contre je comprends moins bien

Code:

---

document.getElementById('thumbs'), i, nbr = sliderContent.slides.length;

---

On affecte les variables des images les unes après les autres a la variable oDest, donc dans l'élément qui a pour id thumbs et on fait la boucle autant de fois qu'il y a de variables (nbr).
Je ne comprends pas bien le i au milieu, il faut qu'il passe en paramètre et ensuite on lui passe une valeur c'est ça?

Bonjour,

Code:

---

1 2	var oDest = document.getElementById('thumbs'), i, nbr = sliderContent.slides.length;

---

c'est l'écriture condensée équivalente à :

Code:

---

1 2 3

var oDest = document.getElementById('thumbs'); var i; var nbr = sliderContent.slides.length;

---

On déclare simplement les variables qui seront utilisées.
i est utilisé dans la boucle.

Extra, j'ai tout compris, merci!!