Bonjour,
cette question a déjà été posée dans le forum, mais les réponses ne m'ont rien apporté, et je ne trouve aucune solution après de longues recherches sur le web.
Je veux absolument que chaque photo de mon album possède un commentaire qui s'affiche en-dessous de la grande image.
Mon code html:
Mon script (identique à celui du tuto) :
J'ai déjà essayé de m'inspirer de la solution fournie sur ce site http://www.clb56.fr/test_php_js/etude_galerie_js/ mais sans résultat, mis appart que la description s'affichait sous les vignettes
...
À noter que mon serveur ne me donne pas la possibilité d'utiliser php.
Quant à mes connaissances de Javascript, elles ne me permettent pas encore de modifier le code du tuto de manière efficace. Mais il y en a certainement ici qui sont meilleurs que moi, non
S'il-vous-plaît aidez-moi quelqu'un
[/i]
cette question a déjà été posée dans le forum, mais les réponses ne m'ont rien apporté, et je ne trouve aucune solution après de longues recherches sur le web.
Je veux absolument que chaque photo de mon album possède un commentaire qui s'affiche en-dessous de la grande image.
Mon code html:
<ul id="galerie_mini">
<li><a href="Photos/ete_2006/1-ma_chambre.jpg" title="Ma chambre chez Claudia"><img src="Photos/ete_2006/minies-ete_2006/1-ma_chambre.jpg" alt="Ma chambre chez Claudia" /></a></li>
<li><a href="Photos/ete_2006/2-cuisine_chez_claudia.jpg" title="Notre cuisine"><img src="Photos/ete_2006/minies-ete_2006/2-cuisine_chez_claudia.jpg" alt="La cuisine chez Claudia" /></a></li>
<li><a href="Photos/ete_2006/3-cours_chez_claudia.jpg" title="La cours derrière"><img src="Photos/ete_2006/minies-ete_2006/3-cours_chez_claudia.jpg" alt="La cour intérieur chez Claudia" /></a></li>
<li><a href="Photos/ete_2006/4-behaimstr.jpg" title="Behaimstrasse, ma rue" class="fleches"><img src="Photos/ete_2006/minies-ete_2006/4-behaimstr.jpg" alt="La rue où j'ai habité" /></a></li>
<li><a href="Photos/ete_2006/5-langhansstr.jpg" title="Et on tourne le coin : Langhansstrasse"><img src="Photos/ete_2006/minies-ete_2006/5-langhansstr.jpg" alt="Le titre de la photo 5" /></a></li>
<li><a href="Photos/ete_2006/6-antonplatz.jpg" title="Titre de la photo 6"><img src="Photos/ete_2006/minies-ete_2006/6-antonplatz.jpg" alt="Le titre de la photo 6" /></a></li>
</ul>
<dl id="photo">
<dt> </dt>
<dd><img id="big_pict" src="Photos/ete_2006/1-ma_chambre.jpg" alt="Photo 1 en taille normale" /></dd>
</dl>
Mon script (identique à celui du tuto) :
function displayPics()
{
var photos = document.getElementById('galerie_mini') ;
// On récupère l'élément ayant pour id galerie_mini
var liens = photos.getElementsByTagName('a') ;
// On récupère dans une variable tous les liens contenu dans galerie_mini
var big_photo = document.getElementById('big_pict') ;
// Ici c'est l'élément ayant pour id big_pict qui est récupéré, c'est notre photo en taille normale
var titre_photo = document.getElementById('photo').getElementsByTagName('dt')[0] ;
// Et enfin le titre de la photo de taille normale
// Une boucle parcourant l'ensemble des liens contenu dans galerie_mini
for (var i = 0 ; i < liens.length ; ++i) {
// Au clique sur ces liens
liens[i].onclick = function() {
big_photo.src = this.href; // On change l'attribut src de l'image en le remplaçant par la valeur du lien
big_photo.alt = this.title; // On change son titre
titre_photo.firstChild.nodeValue = this.title; // On change le texte de titre de la photo
return false; // Et pour finir on inhibe l'action réelle du lien
};
}
}
window.onload = displayPics;
// Il ne reste plus qu'à appeler notre fonction au chargement de la page
J'ai déjà essayé de m'inspirer de la solution fournie sur ce site http://www.clb56.fr/test_php_js/etude_galerie_js/ mais sans résultat, mis appart que la description s'affichait sous les vignettes
...À noter que mon serveur ne me donne pas la possibilité d'utiliser php.
Quant à mes connaissances de Javascript, elles ne me permettent pas encore de modifier le code du tuto de manière efficace. Mais il y en a certainement ici qui sont meilleurs que moi, non
S'il-vous-plaît aidez-moi quelqu'un
[/i]