Vignettes zoomables façon "thumbnail"

Version imprimable

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:

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.

21/05/2018, 11h44
Doksuri

Code:

$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
21/05/2018, 19h44
modus57

1 pièce(s) jointe(s)

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:

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

$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 :
Pièce jointe 382322

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 ?
22/05/2018, 08h33
Doksuri
Citation:

Envoyé par modus57

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

=> CSS :
Code:

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

Envoyé par modus57

Est-ce possible d'afficher 6 images par lignes

=> test le modulo dans ta boucle :

Code:

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

Citation:

Envoyé par modus57

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; )
02/06/2018, 10h31
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.
02/06/2018, 16h38
Invité
Bonjour,