[resolu]Tutorial album photo en JS

Bonjour à tous
Désolé je suis un peu perdu et je ne connais rien en JS.

Je voualis utiliser le tutoriel pour afficher sur UNE seule page les miniatures et la photo agrandie. Je n'arrive pas à modifier en conséquence la photo agrandie. Que dois-je changer. Je ne comprends malheureusement pas les 'dd' etc.

Merci pour vos explications.

mon code css

.imagemini
{
width:70px;
height:px;
display: inline;
padding:8px;
}
ul#galerie_mini
{
	margin: 0 ;
	padding: 0 ;
	list-style-type: none ;
}

ul#galerie_mini li
{
	display: inline;
}

ul#galerie_mini li a img
{
	margin: 2px 1px ;
	border: 1px solid #dcb ;
}

dl#photo
{
	clear: both ;
	margin: 0 auto ;
}

dl#photo dt
{
	font: italic 2.5em/1.5em Georgia, serif ;
	color: #dcb ;
}

dl#photo dd
{
	margin: 0 ;
}

dl#photo img
{
	border: 1px solid #dcb ;
}

ma page (avec <script type="text/javascript" src="script.js"></script> dans le head)

<ul id="galerie_mini">
<li><a href="clubs-parcours.php" title="Titre de la photo 1"><img src="../images/<?php echo $donneesparcours['1p1']; ?>.jpg" class="imagemini" alt="Trou 1" title="Trou 1"></a></li>
<li><a href="clubs-parcours.php" title="Titre de la photo 2"><img src="../images/<?php echo $donneesparcours['2p1']; ?>.jpg" class="imagemini" alt="Trou 2" title="Trou 2"></a></li>
</ul>


<dl id="grandephoto">
	<dt>Titre de la photo 1</dt>
	<dd><img id="big_pict" src="../images/<?php echo $donneesparcours['1p1']; ?>.jpg" alt="Photo 1 en taille normale" /></dd>
</dl>

mon script JS

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

Merci. (j'ai peut-être mal oublié d'appeler la fonction ou un truc tout con dans ce style mais comme je ne connais guère JS...)[/i]
Modifié par moom (22 May 2006 - 15:22)

testes cette version qui n'utilise pas de liste de définition.
sinon, pour te répondre, on préfère le code de la page complète ou mieux, une URL.

Merci Chmel !
je ne sais pas trop ce qui a changé, ni ce que j'ai compris mais au moins çà fonctionne ! Enfin encore quelques réglages de présentation et c'est bon. En tout cas sans la liste et avec le code JS dans la page c'est déjà plus clair pour moi. Merci.