Discussion :

[mlazaro]

Bonjour,

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Mon JS:

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
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.

[NoSmoking]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[mlazaro]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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?

[Invité]

Bonjour,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[mlazaro]

Extra, j'ai tout compris, merci!!