J'apprends de jours en jours en javascript mais j'ai encore pas mal de choses à apprendre.
J'ai un petit soucis :
J'ai une liste de photos et quand je clique dessus, la même photo s'agrandit dans un emplacement prévu. Dans l'espace agrandi j'aimerais pouvoir récupérer le lien afin de cliquer sur la photo et l'ouvrir en grande taille.
J'espère avoir été clair lol
Voici le fichier js :
CODE
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
{
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
Liste photo mini :
CODE
<ul id="galerie_mini">
<li>
<div align="center"><a href="photos_offres/<?PHP echo $valeur2; ?>" title="Photo <?PHP echo $j; ?> de <?PHP echo $total_compteur; ?>"><img src="photos_offres/mini/<?PHP echo $valeur2; ?>" alt="Photo <?PHP echo $j; ?> de <?PHP echo $total_compteur; ?>" /></a></div>
</li>
</ul>
<li>
<div align="center"><a href="photos_offres/<?PHP echo $valeur2; ?>" title="Photo <?PHP echo $j; ?> de <?PHP echo $total_compteur; ?>"><img src="photos_offres/mini/<?PHP echo $valeur2; ?>" alt="Photo <?PHP echo $j; ?> de <?PHP echo $total_compteur; ?>" /></a></div>
</li>
</ul>
Et voici l'endroit ou la photo s'agrandi en taille moyenne, sur laquelle j'aimerais pourvoir cliquer afin de l'agrandir encore plus :
CODE
<dl id="photo">
<dd><a href="photos_offres/big/<?PHP echo $data_last_tof[photos]; ?>"><img id="big_pict" src="photos_offres/<?PHP echo $data_last_tof[photos]; ?>" alt="" /></a></dd>
<dt>Photo 1 de <?PHP echo $total_compteur; ?></dt>
</dl>
<dd><a href="photos_offres/big/<?PHP echo $data_last_tof[photos]; ?>"><img id="big_pict" src="photos_offres/<?PHP echo $data_last_tof[photos]; ?>" alt="" /></a></dd>
<dt>Photo 1 de <?PHP echo $total_compteur; ?></dt>
</dl>
Le problème c'est que c'est toujours la dernière photo qui s'agrandit. En fait le lien ne change pas.
Auriez vous une petite idée ?
Merci par avance
: