Afficher une image par rapport à sa miniature
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:
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:
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é.
