18041 sujets

Questions générales et questions de débutants

Tuto galerie photo + ajout de la description de la photo

Bonjour à tous,

voilà quelques jours que j'essaie de modifier en vain ce tutorial
de galerie photos. Mon but est de faire apparaitre un commentaire descriptif de chaque photo en même temps que la photo agrandie et que le titre.
J'ai utilisé la solution proposée par pacafou
mais cela ne marche pas... (le commentaire ne change pas en cliquant sur les liens)
je suis vraiment une très grande débutante en javascript et malgré mes efforts pour comprende ce petit bout de script c'est l'echec.
Pourriez-vous m'aider à comprendre ce qui ne va pas, ou me mettre sur la piste.

Voici mon code HTML
 
<div class="conteneurAccueil"> <!-- CONTENEUR CENTRAL-->
		
		
						<ul id="galerie_mini">
		<li><a href="photos/photo1.png" title="titre de la photo 1"> <img src="photos/minis/m_photo1.png" alt="Le titre de la photo 2"/></a><label class="invisible">Texte associé à la photo 1</label>  </li>

		<li><a href="photos/photo2.png" title="titre de la photo 2"> <img src="photos/minis/m_photo2.png" alt="Le titre de la photo 2"/> </a><label class="invisible">Texte associé à la photo 2</label></li>
		<li><a href="photos/photo3.png" title="Titre de la photo 3"><img src="photos/minis/m_photo3.png" alt="Le titre de la photo 3"/></a><label class="invisible">Texte associé à la photo 3</label></li>
		
					</ul>
	
			<dl id="photo">
			<dt>titre de la photo 1</dt>
			<dd><img id="big_pict" src="photos/photo1.png" alt="Photo 1 en taille normale" />
			<label id="textSlide"> Texte associé à la photo 1 </label></dd>
			
			</dl>



et voici le script du Tuto + les ajouts de pacafou
 
unction 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 comment = photos.getElementsByTagName('label') ;										
	 	
		
	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
	var label_photo = document.getElementById('photo').getElementsByTagName('label')[0] ;




	
	for (var i = 0 ; i < liens.length ; ++i) {	// Une boucle parcourant l'ensemble des liens contenu dans galerie_mini
												// Boucle comprenant autant d'itération qu'il y a de liens
		
					/*  pour chaque occurence des liens on récupère, dans la variable 'comment' l'unique élément <p> compris dans le <li> correspondant */
			
						
			liens[i].onclick = function()// Au clique sur ces liens 
				{
				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//* Pour chaque occurence de lien cliqué on récupère la description de même niveau d'ordre dans le tableau 'tableau_commentaire' ... */
				titre_photo.firstChilNodeValue = this.title; // On change le texte de titre de la photo
				label_photo.firstChild.nodeValue = this.nextSibling.firstChild.nodeValue;
				return false;}


}
}


window.onload = displayPics;



D'avance merci de votre aide
[/i]
Bonsoir et merci de ta réponse

J'avais déjà regardé le lien que tu m'indiques, mais je n'arrive pas à saisir ce qui ne marche pas (car ça ne marche toujours pas malgré millemanipulations), je n'arrive même pas à utiliser innreHTMl. Sans doute je ne me suis pas assez penchée sur le javascript (même si j'ai réussi à intégrer le script du menu déroulant dans mon site.

Finalement j'ai laissé tombé javascript pour fair ma galerie et j'ai utilisé les pistes que j'ai trouvé sur le site pour la faire juste en CSS (masquer/afficher un div au passage de la souris) En espérant que ça reste assez stable selon les navigateurs.

Je me mettrai à javascritp si j'en ai un jour le temps et le besoin bien sûr !
Bonjour à tous,
Dommage que tu abandonnes le javascript, car je me penche sur le même problème que toi et j'aurai aimé avoir une réponse Smiley cligne
J'ai testé le script de pacafou également.
Jusque là, j'arrive à cacher le commentaire dans les photos mini, mais il ne s'affiche pas à coté de la grande photo.
Dans l'idéal : j'aimerai qu'il apparaisse à côté du titre.
En plus, il y a un problème avec le onclick, la photo apparait bien en big-pict mais en plus s'ouvre dans une nouvelle fenêtre.
A mon avis, il a du oublier une étape essentielle pour que ça marche, ou j'ai loupé qqch.
Si quelqu'un peut cependant apporter une réponse à ce problème, je le remercie par avance.
Sujet clos
Aller à