Problème lien photo

[aodot]

Bonjour,

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 :

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

Liste photo mini :

<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>

Et voici l'endroit ou la photo s'agrandi en taille moyenne, sur laquelle j'aimerais pourvoir cliquer afin de l'agrandir encore plus :

<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>

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

[raptor]

T'aurai pas un exemple online parce que là j'ai pas tout saisi...

[aodot]

Bonjour,

Tout d'abord merci pour votre réponse et désolé de ne pas avoir répondu avant mais en ce moment l'agenda déborde lol.

Impossible pour moi de vous montrer le site online mais je vais essayer de vous expliquer avec cette image :

EN gros quand on clique sur une photo dans le listing, celle ci apparait en grand en haut à droite. EN fait, je voudrais que quand on clique sur l'agrandissement, celle ci s'ouvre dans une fenêtre popup en encore plus grand.

Mais avec le code indiqué dans le précédent message, je n'ai sais pas ou l'indiquer.

J'espère avoir été plus clair.

Merci par avance.

[captain_torche]

Et en ajoutant ceci à ta fonction ?

CODE

for (var i = 0; i < liens.length; ++i) {

// Au clique sur ces liens

liens.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

var reg = new RegExp('photos_offres');

big_photo.parentNode.setAttribute('href') = this.getAttribute('href').replace(reg, 'photos_offres/big');

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

};

}

[aodot]

Merci pour votre réponse rapide.

J'ai bien intégré votre code à ma fonction, c'est presque ça mais le click est actif sur les petites photos alors que je voudrais qu'il soit actif sur l'agrandissement.

Désolé, si je ne suis pas clair mais en tout cas un grand merci pour votre aide.

Je continue a tester de mon coté et vous tiens au courant.

[captain_torche]

Si big_photo est bien l'id de la grande image, ça devrait pourtant fonctionner.

Tu pourrais éventuellement copier-coller le source de ta page générée ? ca serait plus facile pour t'aider.

[aodot]

Voici la code généré :

- Pour la partie agrandissement photo (la ou je désire le lien afin d'ouvrir une popup) :

<dl id="photo">

							  <dd><img id="big_pict" src="photos_offres/offre-fb24d518785e96baf05d960f1d8e901a.jpg" alt="" /></dd>
							  <dt>Photo 1 de 4</dt>
							</dl>

- la partie listing (j'ai mit qu'une photo afin de simplifier) :

<ul id="galerie_mini">
<li>
<div align="center"><a href="photos_offres/offre-fb24d518785e96baf05d960f1d8e901a.jpg" title="Photo 1 de 4"><img src="photos_offres/mini/offre-fb24d518785e96baf05d960f1d8e901a.jpg" alt="Photo 1 de 4" /></a></div>
</li> 
</ul>

En fait je pense qu'il faut, quand on clique une miniature, que le lien pour l'agrandissement reprenne le chemin. Car en fait les photos ont le même nom pour toutes les tailles sauf que le répertoire change (mini, normal et big).

[captain_torche]

Je regarderai ça dans l'après-midi si j'ai un peu de temps.

[steph29]

<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>

on peut jouer avec les noeud du DOM comme le fait captain torche mais la autant mettre un id sur le lien que l'on veut modifer, on se simplifie la vie:

<a href="photos_offres/big/<?PHP echo $data_last_tof[photos]; ?>" id="link_big_pict"><img id="big_pict" src="photos_offres/<?PHP echo $data_last_tof[photos]; ?>" alt="" /></a>

ensuite dans ta fonction tu remplace bien le chemin de l'image mais pas celui du lien, donc il est logique que ce soit la meme photo au clic (meme si l'image change bien a l'affichage)

donc un truc du genre a rajouter dans ta fonction clic :

var lien_big_photo = document.getElementById('link_big_pict');
lien_big_photo.href = this.href;

Modifié 11 Avril 2008 par steph29

[aodot]

Bonjour à tous,

Un grand merci à captain_torche et à steph 29, cela fonctionne.

Le code de steph29 fonctionne très bien.

Cependant j'ai encore un petit soucis : l'image en popup est la même que celle aggrandit (la moyenne) alors que j'aimerais que ce soit la photo du répertoire big qui soit affiché en popup.

Je pense que c'est pas trop compliqué car c'est juste une histoire de répertoire. Je fais des tests et vous tiens au courant.

Encore un grand merci vous m'enlevez une épine du pied.

[steph29]

en effet j'ai pense apres au chemin...

mais captain torche l'avais fait

donc un truc du genre:

var reg = new RegExp('photos_offres');
lien_big_photo.href = this.href.replace(reg, 'photos_offres/big');

[aodot]

Voila dernière modif réalisé et out fonctionne comme je le voulais.

J'avais relu la réponse de captain_torche et j'allais essayer de regrouper les deux réponses.

Encore un grand merci.