Afficher une image par rapport à sa miniature

**mrdesign38** · 09/10/2012, 22h31

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** · 10/10/2012, 08h10

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** · 10/10/2012, 08h45

Pour boucler sur tes liens :

Code :

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

liens.each(... )

**Bovino** · 10/10/2012, 08h53

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** · 10/10/2012, 08h57

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** · 10/10/2012, 11h17

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

**Bovino** · 10/10/2012, 11h22

J'imagine que ton code se trouve dans la balise <head>, auquel cas, au moment où il est interprété, les éléments n'existent pas dans la page, donc tes variables sont mal initialisées !

**mrdesign38** · 10/10/2012, 11h30

Et bien en fait le code est dans un fichier externe, que j'appel, effectivement dans la balise head

Code :

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

<script type="text/javascript" src="fonctions/images.js"></script>

Il faut que je mette les fonctions sous les lignes qui affichent les images ?

**Bovino** · 10/10/2012, 11h39

Arf non... Désolé, j'ai dit n'importe quoi vu que les déclarations se font dans la fonction.
Oublie mon précédent message...

**mrdesign38** · 10/10/2012, 11h42

Pas de problème, c'est déjà très gentil de pencher sur mon problème!

Parce que sa me bloque dans le développement de mon site et je ne comprend pas pourquoi la deuxième fonction n'est pas éxécutée

**devyan** · 10/10/2012, 15h26

Bonjour,

Par contre on peut effectivement se poser la question de savoir à quel moment est utilisée la fonction displayPics().

devyan

**mrdesign38** · 10/10/2012, 16h30

La fonction est appelée au chargement de la page?
Est ce que c'est bon ?

**Bovino** · 10/10/2012, 16h45

Si on en croit ton code PHP, tu as un problème d'id multiple.
Or un id doit être unique dans la page !

**mrdesign38** · 10/10/2012, 16h53

je ne crois pas, il y a id="nom_grde_img" et id="grde_img"

**Bovino** · 10/10/2012, 16h56

Oui, mais dans une boucle !

Code php :

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

1
2
3
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>';
}

Enfin... le mieux serait de regarder / nous montrer le code HTML généré.

**mrdesign38** · 10/10/2012, 17h09

Dans la boucle l'id sert uniquement au JS.

Voici la source de la page:

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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Annonce de collection</title>
<link href="css/generale.css" rel="stylesheet" media="all" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="fonctions/images.js"></script>
</head>
 
<body>
<div class="header"></div>
<div id="bloc_connex">
	<p id="connex">
		<span class="welcome">Bienvenue mrdesign</span>			<a href="compte.php" title="Mon compte">Mon compte</a> - 
			<a href="logout.php" title="Déconnectez-vous.">Déconnexion</a>
				</p>
</div>
<div id="ad_head"></div><div id="menu">
 
	<ul>
		<li><a href="index.php" title="Accueil">Accueil</a></li>
		<li><a href="#" title="Forum">Forum</a></li>
		<li><a href="ajout.php" title="Déposer une annonce">Déposer une annonce</a></li>
	</ul><br />
 
		<div id="menu_login">
		<ul>
			<li><a href="compte.php?to=annonces" title="Mes annonces">Mes annonces</a></li>
			<li><a href="#" title="#">Menu 2</a></li>
			<li><a href="#" title="#">Menu 2</a></li>
			<li><a href="#" title="#">Menu 2</a></li>
		</ul>
	</div><br />
	<ul><li><a href="liste.php?id=8" title="Art, antiquités">Art, antiquités</a></li><li><a href="liste.php?id=10" title="Auto, moto">Auto, moto</a></li><li><a href="liste.php?id=22" title="Autres">Autres</a></li><li><a href="liste.php?id=20" title="Bijoux">Bijoux</a></li><li><a href="liste.php?id=1" title="Cartes postales">Cartes postales</a></li><li><a href="liste.php?id=6" title="Cinéma, DVD">Cinéma, DVD</a></li><li><a href="liste.php?id=5" title="Fèves">Fèves</a></li><li><a href="liste.php?id=12" title="Jetons, médailles">Jetons, médailles</a></li><li><a href="liste.php?id=14" title="Jeux, jouets">Jeux, jouets</a></li><li><a href="liste.php?id=16" title="Livres, BD">Livres, BD</a></li><li><a href="liste.php?id=17" title="Militaria">Militaria</a></li><li><a href="liste.php?id=9" title="Minéraux, fossiles">Minéraux, fossiles</a></li><li><a href="liste.php?id=13" title="Modélismes">Modélismes</a></li><li><a href="liste.php?id=7" title="Monnaies, billets">Monnaies, billets</a></li><li><a href="liste.php?id=4" title="Musique, instruments">Musique, instruments</a></li><li><a href="liste.php?id=11" title="Papiers">Papiers</a></li><li><a href="liste.php?id=18" title="Parfums, beauté">Parfums, beauté</a></li><li><a href="liste.php?id=19" title="Photographies">Photographies</a></li><li><a href="liste.php?id=23" title="Pin's">Pin's</a></li><li><a href="liste.php?id=21" title="Publicités">Publicités</a></li><li><a href="liste.php?id=15" title="Sports, passions">Sports, passions</a></li><li><a href="liste.php?id=2" title="Télécartes">Télécartes</a></li><li><a href="liste.php?id=3" title="Timbres">Timbres</a></li></ul></div>
<div id="bloc_centre">
<p>Accueil >  > Cartes postales</p><h1>Carte paysage</h1><span class="img_tall"><img id="grde_img" src="img_annonces/50701d7d24f3f/photo_1.jpeg" alt="Image principale de l'annonce" /></span><br /><span id="nom_grde_img"><a href="img_annonces/50701d7d24f3f/photo_1.jpeg"><img src="img_annonces/50701d7d24f3f/m_photo_1.jpeg" alt="Image principale de l'annonce" /></a></span><span id="nom_grde_img"><a href="img_annonces/50701d7d24f3f/photo_2.jpeg"><img src="img_annonces/50701d7d24f3f/m_photo_2.jpeg" alt="Image principale de l'annonce" /></a></span><span id="nom_grde_img"><a href="img_annonces/50701d7d24f3f/photo_3.jpeg"><img src="img_annonces/50701d7d24f3f/m_photo_3.jpeg" alt="Image principale de l'annonce" /></a></span>	<div id="description">
		<p>Cette carte est de 1865
</p>	</div>
	<div id="adrec"></div>
 
	<div class="clear"></div><br />
 
</div>
<div class="clear"></div>
<div id="ad_foot"></div>
<div id="footer"></div>
</body>
</html>

**Bovino** · 10/10/2012, 17h10

Raison de plus !
getElementById() ne te renverra que le premier élément ayant l'id spécifié. Les autres sont tout simplement ignorés.

**mrdesign38** · 10/10/2012, 17h18

Ok mais sa me complique grandement les choses sa, parce que je ne connais pas à l'avance le nombres de photos présente dans le dossiers. il faut que j'envoie également le nombre de photos à la fonctions JS, que je fasse une boucle et que je créer plusieurs var photos et donc coté php je fait sa:

Code :

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

echo '<span id="nom_grde_img_'.$i.'">...

C'est sa ?

C'est quand même bien compliqué, juste pour afficher la taille réel d'une miniature alors que je connais tout.

Est ce qu'il ne serait pas plus simple de récupéré juste le numéro de l'image dans le tableau php $miniature et de le faire passer ici:

Code :

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

<span class="img_tall"><img id="grde_img" src="'.$path_dossier.''.$photos[ICI].'"

?

**mrdesign38** · 10/10/2012, 18h48

Au secours ...
Comment récupérer le nombre de miniatures dans la fonction ???

**devyan** · 11/10/2012, 13h31

Envoyé par mrdesign38

Au secours ...
Comment récupérer le nombre de miniatures dans la fonction ???

Salut,

CE n'est pas forcément nécessaire...
Tu parts de i=0 puis tu boucles tant que getElementById() ne revoie pas null.

devyan.

Afficher une image par rapport à sa miniature

JavaScript

Discussions similaires

Partager

Partager