Discussion :

[fruitor]

Bonjour, chers amis,

Je cherche à apprendre le javascript et par la même occasion, à réaliser ce petit projet, qui me semble assez simple. Je précise que je maitrise bien le css/html.

Il s'agirait de faire défiler (sans animation ! simplement d'afficher l'une après l'autre) des images accompagnées de leurs légendes, à l'aide d'un bouton/image "suivant".
Donc, on est sur une page avec une image et sa légende, on clique sur next, et on passe à l'image/légende suivante, et ainsi de suite jusqu'à ce qu'on revienne au début.

j'ai commencé quelque chose à cette adresse, aidé par un copain :
http://qjrq.com/mimosa/javascript-essai.html

Le js est ici:
http://qjrq.com/mimosa/javascript.js

Mais je n'ai pas l'impression que ce soit la bonne méthode. D'une part je ne sais pas comment revenir au début avec le bouton précédent, et d'autre part je préfèrerais avoir les différentes images/légendes dans le html au lieu de les avoir sur le code js.

De nombreuses recherches sur google m'ont amené sur des dizaines de codes de ce genre, mais bien plus sophistiqués (animés avec des scrolls, des thumbnails etc). Or je commence tout juste à m'intéresser au javascript et du coup j'ai du mal à décortiquer et à repérer juste les fonctions qui m'intéressent.

Pensez vous que vous pourriez m'aider pour ça ?

[le_chomeur]

Bonjour et bienvenue

Pour commencer simple tu pourrais travailler avec une liste :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<ul id="galerie">
<li>
<img src="img1.jpg" />
le texte
</li>
<li>
<img src="img1.jpg" />
le texte
</li>
<li>
<img src="img1.jpg" />
le texte
</li>
</ul>

puis tu masques en css toute les li :

Code :

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

1
2
3
ul .li {
display:none
}

voila
ensuite a l'initialisation de ton script tu n'affiches QUE le premier

Code :

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

document.getElementById("galerie").getElementsByTagName('li')[0].display = "block";

puis pour la gestion de suivant et précédent , tu travailles sur les node et voila tu auras de quoi refaire ta galerie un peu plus proprement

[fruitor]

Merci beaucoup pour cette réponse pleine de ressources et ce bon accueil.
Je vois l'intérêt de faire une liste ; cela remet les choses en bon ordre. Et je vais étudier sérieusement ces histoires de nodes / DOM. Les choses commencent à faire sens !
Merci d'avoir pris du temps pour éclairer ma lanterne. Je poste le résultat quand j'ai un bon petit code bien ficelé !
à bientôt !