Discussion :

[modus57]

Bonjour

Voici le code que j'ai pioché et modifié, celui-ci permet de faire des vignettes façon "thumbnail" mais j'ai un petit souci, il liste bien les fichiers qui ont une extension "jpg", "jpeg", "png" et/ou "gif dans un répertoire, mais les images ne s'affichent pas.

Je ne comprends pas pourquoi ?

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
26
27
28
29
30
31
32
33
34
35
<?php
echo'
<div>
     <!--affichage de l\'entête du tableau-->
     <table border="1" align="left"><caption>Images </caption>';
 
	//nom du répertoire contenant les images à afficher
	$nom_repertoire = "C:/wamp64/www/Images/galerie_images/";//fonctionne pas
 
	//on ouvre le repertoire
	$pointeur = opendir($nom_repertoire);
	$i = 0;
 
	//on les stocke les noms des fichiers des images trouvées, dans un tableau
	while ($fichier = readdir($pointeur)){      
	   if (substr($fichier, -3) == "gif" || substr($fichier, -3) == "jpg" || substr($fichier, -3) == "png" 
		   || substr($fichier, -4) == "jpeg" || substr($fichier, -3) == "PNG" || substr($fichier, -3) == "GIF" || substr($fichier, -3) == "JPG"){
		   $tab_image[$i] = $fichier;
		   $i++;      
	   }      
	}
 
	//on ferme le répertoire
	closedir($pointeur);
 
	//on trie le tableau par ordre alphabétique
	array_multisort($tab_image, SORT_ASC);
 
	//affichage des images (en 100 * 75 ici)
	for ($j=0;$j<=$i-1;$j++){
	$image = '<img src="'.$nom_repertoire.'/'.$tab_image[$j].'" width="100" height="75">';
	echo '<td align="center">'.$image."<br>".$tab_image[$j].'</td>';      
	}
	echo '</table></div>'; 	
	?>

D'autre part comment faire pour rendre ces vignettes zoomables façon "thumbnail" au clic de la souris pour afficher l'image à une taille supérieure proportionnelle définie ?

Merci d'avance pour votre aide.

[Doksuri]

Code :

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

$nom_repertoire = "C:/wamp64/www/Images/galerie_images/";//fonctionne pas

le serveur web n'a pas acces a ton pc. il faut mettre tes images au meme endroit que ton code.
apres pour les images, il te suffit d'une class css qui force une petite taille
et au clique, tu toggle cette classe

[modus57]

Bonjour Doksuri et merci pour ta réponse. ☼☼

Finalement j'ai trouvé la solution pour ne pas mettre le code au même endroit que les images

Code :

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

$nom_repertoire = "../../Images/galerie_images";

Pour les images, je force une petite taille et au clic de la souris l'image s'affiche à sa taille réelle.

Code :

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

$image = '<a href="'.$nom_repertoire.'/'.$tab_image[$j].'" alt=""><img src="'.$nom_repertoire.'/'.$tab_image[$j].'" width="100" height="75">';

Mais comment éviter que l'image soit décaler en haut quand la longueur du nom est plus court voici un exemple :


Est-ce possible d'afficher 6 images par lignes et une croix sur l'image pour revenir à la page précédente au lieu de faire un clic sur la flèche en haut à gauche de la page ?

[Doksuri]

Mais comment éviter que l'image soit décaler en haut quand la longueur du nom est plus court

=> CSS :

Code css :

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

1
2
3
white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis;

Est-ce possible d'afficher 6 images par lignes

=> test le modulo dans ta boucle :

Code php :

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

if($j%6===0) { echo '<br />'; }

une croix sur l'image pour revenir à la page précédente au lieu de faire un clic sur la flèche en haut à gauche de la page ?

=>oui, avec les positions:absolute en css (pense a encadrer d'un div en position:relative; )

[modus57]

Bonjour Doksuri.

Je réponds tardivement car je me suis absenté.

Pour le CSS cela ne devrait pas me poser de problèmes.

J'ai essayer mais je ne vois pas ou placer le code pour limiter le nombre d'image par page.

Pourriez-vous svp me donner un indice plus précis.

[Invité]

Bonjour,

• Une galerie d'images CSS3 avec effet de zoom
• Créer une galerie d'images Polaroid en CSS
• ...