Discussion :

[mrdesign38]

Bonjour,

Est ce que vous pourriez m'aider à résoudre un problème.
Je voudrais afficher une image au clic sur sa miniature, le problème c'est que je récupère le chemin de l'image en php et je ne sait pas comment faire pour l'afficher en JS ou AJAX en tout cas sans recharger la page.

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
$path_dossier = 'img_annonces/'.$id_dossier.'/';
if(is_dir($path_dossier)){
	$dir = opendir($path_dossier);
	$valide_ext = array('jpeg', 'png', 'gif');
	$miniatures = array();
	$photos = array();
	while($fichiers = readdir($dir)){
		if(is_file($path_dossier.'/'.$fichiers)){
		$ext = strtolower(substr($fichiers, strrpos($fichiers, '.')+1));
		if(in_array($ext, $valide_ext)){
			if(strrchr($fichiers, 'm_')){ array_push($miniatures, $fichiers); }
			else{ array_push($photos, $fichiers); }
		}
	}
}
closedir($dir);
 
//Affichage de l'image
echo '<span class="img_tall"><img id="grde_img" src="'.$path_dossier.''.$photos[0].'" alt="Image principale de l\'annonce" /></span><br />';
 
//Affichage des miniatures
for($i=0; $i<count($miniatures); $i++){
echo '<span id="nom_grde_img"><a href="'.$path_dossier.''.$photos[$i].'"><img src="'.$path_dossier.''.$miniatures[$i].'" alt="Image principale de l\'annonce" /></a></span>';
}
}

J'ai tenté de faire ceci, mais sans succès:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
function displayPics()
{
var photos = document.getElementById('nom_grde_img') ;
 
var liens = photos.getElementsByTagName('a') ;
 
var big_photo = document.getElementById('grde_img') ;
 
 
// 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
 
return false; 
};
}
 
// Il ne reste plus qu'à appeler notre fonction au chargement de la page
window.onload = displayPics;

Je ne comprend pas se qui ne fonctionne pas, peut être parce que les images sont déclarées en php ? mais j'ai essayé de déclarer le php juste dans src="" mais sa n'a rien changé.

[Bovino]

Déjà expliqué un nombre incalculable de fois !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var liens = photos.getElementsByTagName('a') ;

Comme le "s" de "elements" l'indique clairement, liens correspond à une collection d'objets HTML !
Donc

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

liens.onclick = function(){...}

ne peut pas fonctionner car une collection ne gère pas les événements !

[SpaceFrog]

Pour boucler sur tes liens :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

liens.each(... )

[Bovino]

Euh... non Spaffy, c'est pas du jQuery

De plus, avec une collection, tu ne peux même pas utiliser forEach()... ce sera donc une boucle for classique !

[SpaceFrog]

arf c'est le code php avec ses $ qui m'a induit en erreur :red:

Merci de lire le mode d'emploi de ce forum : "Ne postez que le html js généré !!!"

Donc une boucle while ou for sur la collection

[mrdesign38]

Bonjour,
Merci pour vos réponses.
effectivement dans le tuto sur lequel je me suis inspiré il y avait une boucle for
mais vu que j'avais qu'un seul lien à faire passer je me suis dit que c'était inutile.
Et effectivement je n'avait pas vu le 's' à element.
Excusez moi j'essaie de me mettre au JS, je ne connais pas grand chose encore.

j'ai donc mi la boucle for, mais le problème reste le même la fonction qui est censé remplacer src="" n'est pas exécutée.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
function displayPics()
{
var photos = document.getElementById('nom_grde_img') ;
 
var liens = photos.getElementsByTagName('a') ;
 
var big_photo = document.getElementById('grde_img') ;
 
 
for (var i = 0 ; i < liens.length ; ++i) {
 
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
 
 
return false; // Et pour finir on inhibe l'action réelle du lien
};
}
}
 
 
window.onload = displayPics;

Le lien html est toujours actif