Clic miniature pour afficher les images contenues dans un répertoire

Eléphanteau du PHP | 10 Messages

08 juin 2018, 12:10

Bonjour.
Débutant depuis peu en PHP, j'ai passé pas mal de temps à chercher un code permettant de créer une galerie d'images.
J'ai récupérer et modifier un script trouvé sur ce forum, ça fonctionne sauf le test du type d'images jpeg ou png … qui ne fonctionne pas :

Code : Tout sélectionner

[<fieldset style="width:500px"><legend><Font color=blue>Galerie images 6 images par lignes</font></legend> <?php $table = '<table align="left" cellspacing="10" width="500"><tr>'."\n"; $liste = array(); $dir = "../../Images/galerie_images"; if ($dossier = opendir($dir)) { $i = 0; while (($item = readdir($dossier)) !== false) { if ($item[0] == '.') { continue; } //if (!in_array(end(explode('.', $item)), array('jpg','jpeg','png','gif'))) { continue; } //fonctionne pas $liste[] = $item; if (substr($item, -3) == "gif" || substr($item, -3) == "jpg" || substr($item, -3) == "png" || substr($item, -4) == "jpeg" || substr($item, -3) == "PNG" || substr($item, -3) == "GIF" || substr($item, -3) == "JPG") { $tab_image[$i] = $item; $i++; } } } closedir($dossier); rsort($liste); $nb_images_ligne = 6; $i=1; foreach ($liste as $val) { if($i%$nb_images_ligne != 0){ $table .= '<td><a href="'.$dir.'/'.$val.'" alt=""><img class="myImg" src="'.$dir.'/'.$val.'" width="100" height="75" alt="'.$item.'" /></a> </td>'."\n"; }else{ $table .= '<td><a href="'.$dir.'/'.$val.'" alt=""><img class="myImg" src="'.$dir.'/'.$val.'" width="100" height="75" alt="'.$item.'" /></a> </td></tr><tr>'."\n"; } $i++; } $table .= '</tr></table>'; echo $table; ?> </fieldset>
Une question complémentaire comment écrire le nom du fichier sous la miniature ?
Merci d'avance pour votre aide.

Avatar du membre
Administrateur PHPfrance
Administrateur PHPfrance | 7549 Messages

08 juin 2018, 16:25

Bonjour,

Il faut que tu fasses un peu de debug par toi même, fais des var_dump() des variables et des résultats des fonctions de ta ligne qui ne fonctionne pas comme tu veux et dis nous à quel endroit exactement ça ne fonctionne pas.
Car sans message d'erreur ni symptôme précis du problème, c'est compliqué de t'aider :D
Quand tout le reste a échoué, lisez le mode d'emploi...

Eléphanteau du PHP | 10 Messages

09 juin 2018, 08:46

Bonjour @rtur :D
Merci de t'intéresser à ma discussion et pour ta réponse.
La ligne qui ne fonctionne pas:

Code : Tout sélectionner

//if (!in_array(end(explode('.', $item)), array('jpg','jpeg','png','gif'))) { continue; } //fonctionne pas
Si je fais un :

Code : Tout sélectionner

echo $item .'<br>';
ou:

Code : Tout sélectionner

var_dump($item);
Ça renvoi la liste de tous les dossiers et fichiers contenus dans le répertoire et des espaces blancs entre les miniatures. :(

Avatar du membre
Administrateur PHPfrance
Administrateur PHPfrance | 7549 Messages

09 juin 2018, 10:11

Et bien fait un var_dump de tes fonctions explode(...), puis end(...), puis in_array(...) pour comprendre à quel moment ça ne fonctionne pas comme tu veux ;)
Quand tout le reste a échoué, lisez le mode d'emploi...

Eléphanteau du PHP | 10 Messages

09 juin 2018, 12:51

J'ai fait un var_dump des fonctions explode(...), puis end(...), puis in_array(...), mais je ne comprends pas très bien comment corriger le problème ?
Voici le message d'erreur :
Strict standards: Only variables should be passed by reference in C:\wamp64\www\... on line …
Par contre il n'y a plus d'espace vide entre les miniatures.

Avatar du membre
Administrateur PHPfrance
Administrateur PHPfrance | 7549 Messages

09 juin 2018, 15:22

C'est la mauvaise utilisation de la fonction end() qui provoque ce message d'erreur (probablement un bout de code très ancien récupéré avant PHP 5.0.5).
Cf la doc : https://secure.php.net/manual/fr/function.end.php
Paramètre :
- array : Ce tableau est passé par référence car il sera modifié par la fonction. Cela signifie que vous devez passer une vraie variable et non une fonction retournant un tableau, car actuellement, seules les variables peuvent être passées par référence.
Or à l'heure actuelle tu as la fonction explode() en paramètre de end()
Quand tout le reste a échoué, lisez le mode d'emploi...

Eléphanteau du PHP | 10 Messages

11 juin 2018, 18:07

Bonjour @arthur.

J'ai corriger mon code en supprimant la ligne :

Code : Tout sélectionner

//if (!in_array(end(explode('.', $item)), array('jpg','jpeg','png','gif'))) { continue; } //fonctionne pas
et en remplacant la ligne :

Code : Tout sélectionner

foreach ($liste as $val)
par :

Code : Tout sélectionner

foreach ($tab_image as $val)
Ça fonctionne parfaitement et il n'y a plus d'espaces blancs entre les miniatures.
Par contre je ne vois comment écrire le nom du fichier sous la miniature ?
Quelle est la procédure pour afficher une croix sur l'image pour la fermer au lieu de faire un clic sur la flèche en haut à gauche de la page ?
Pourriez-vous m'indiquer un piste svp

Avatar du membre
Administrateur PHPfrance
Administrateur PHPfrance | 7549 Messages

11 juin 2018, 18:12

Par contre je ne vois comment écrire le nom du fichier sous la miniature ?
Comment le ferais-tu en HTML ?
Fais le déjà en HTML, et après tu ferras les modifs de code PHP pour rendre ça dynamique.
Quelle est la procédure pour afficher une croix sur l'image pour la fermer au lieu de faire un clic sur la flèche en haut à gauche de la page ?
Idem, il faut commencer par le HTML sur 1 image, et quand tu as ce que tu veux, on voit comment on peut le rendre dynamique.
En revanche pour cette deuxième demande ça dépend de ton script de gallerie d'image, si c'est toi qui a tout développer toi même alors ça devrait pas être trop compliqué. En revanche si tu utilises une librairie toute faite, ça peut être très très compliqué et il faudra que tu regarde dans la doc de ce script si c'est possible déjà
Quand tout le reste a échoué, lisez le mode d'emploi...

Eléphanteau du PHP | 10 Messages

14 juin 2018, 09:37

Bonjour @rtur.
J'ai modifié le script comme suit :
<style>
.myImg {
border-radius: 5px;
border: 5px;
cursor: pointer;
transition: 0.3s;
}
div {
	word-wrap:break-word;
}
td { 
	width:110px;
	padding-top:5px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: center;
}
</style>

Code : Tout sélectionner

foreach ($tab_image as $val) { if($i%$nb_images_ligne != 5){ $table .= '<td><a href="'.$dir.'/'.$val.'"alt="" ><img class="myImg" src="'.$dir.'/'.$val.'" width="100" height="75" alt="" <br><div>'.$tab_image[$i].'</div></a> </td>'."\n"; }else{ $table .= '<td><a href="'.$dir.'/'.$val.'"alt="" ><img class="myImg" src="'.$dir.'/'.$val.'" width="100" height="75" alt="" /><br><div>'.$tab_image[$i].'</div></a> </td></tr><tr>'."\n"; } $i++; }
Le nom du fichier se met sous la miniature mais ne se casse pas avec word-wrap:break-word ?

Avatar du membre
Administrateur PHPfrance
Administrateur PHPfrance | 7549 Messages

14 juin 2018, 10:12

Le problème à mon avis vient de ta directive white-space: nowrap; qui veut dire de ne pas faire de retour à la ligne au niveau des espaces.

Or word-wrap:break-word indique que le seul endroit où on peut fair un retour à la ligne c'est entre chaque mot (donc normalement au niveau des espaces)
Du coup je pense qu'il y a un conflit.

Soit tu essayes word-break: break-all; pour indiquer qu'un mot peut être coupé au milieu si il déborde, soit il faut que tu résolves ton conflit
Quand tout le reste a échoué, lisez le mode d'emploi...

Eléphanteau du PHP | 10 Messages

14 juin 2018, 15:50

Je ne comprends pas : :(
Or word-wrap:break-word indique que le seul endroit où on peut fair un retour à la ligne c'est entre chaque mot (donc normalement au niveau des espaces)
Pourtant j'ai lu dans un autre forum que word-wrap:break-word casser les mots long dans un <div>
Indépendamment du conflit éventuel ?

Avatar du membre
Administrateur PHPfrance
Administrateur PHPfrance | 7549 Messages

14 juin 2018, 22:58

ça dépend du navigateur.
Tu as un test ici des 4 propriétés de word-wrap :
https://developer.mozilla.org/fr/docs/W ... word-break

Firefox ne coupe pas les mots long avec break-word mais avec break-all
Quand tout le reste a échoué, lisez le mode d'emploi...

Eléphanteau du PHP | 10 Messages

15 juin 2018, 08:50

Bonjour @rthur :D
Voici mon dernier script :
<style>
	.myImg {
		border-radius: 5px;
		border: 1px solid #333;
		cursor: pointer;
		transition: 0.3s;
		display: block;
		margin: 1rem auto auto auto;
	}
	div {
		width:100px;
		word-wrap:break-word;
		text-align: center;
		margin: -0.5rem 0 0 0;
	}
	td { 
		width:120px;
		padding:5px;
	}
</style>

Code : Tout sélectionner

<fieldset style="width:500px"><legend><Font color=blue>Galerie 6 images par lignes</font></legend> <?php $liste = array(); $dir = "../../Images/galerie_images"; $string = 'jpg jpeg png gif'; $table = '<table align="left" cellspacing="10" width="500" border="0"><tr>'."\n"; if ($dossier = opendir($dir)) { $i = 0; while (($fichier = readdir($dossier)) !== false) { if ($fichier[0] == '.') { continue; } $liste[] = $fichier; 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++; } } } closedir($dossier); rsort($liste); $nb_images_ligne = 6; $i=0; foreach ($tab_image as $val) { if($i%$nb_images_ligne != 5){ $table .= '<td><a href="'.$dir.'/'.$val.'"'.$val.'" ><img class="myImg" src="'.$dir.'/'.$val.'" width="100" height="75" alt="" /><br><div>'.$tab_image[$i].'</div></a> </td>'."\n"; }else{ $table .= '<td><a href="'.$dir.'/'.$val.'"'.$val.'"><img class="myImg" src="'.$dir.'/'.$val.'" width="100" height="75" alt="" /><br><div>'.$tab_image[$i].'</div></a> </td></tr><tr>'."\n"; } $i++; } $table .= '</tr></table>'; echo $table; ?> </fieldset>
Petit inconvénient si le nom est court la miniature se déplace d'une ligne vers le bas, je vais essayer de corriger ce problème, et essayer de modifier la couleur de fond à l'affichage de l'image en taille réelle avec une croix pour la fermer au lieu de faire un clic sur la flèche en haut à gauche de la page.

Eléphanteau du PHP | 10 Messages

15 juin 2018, 23:39

Bonsoir
Je n'arrive pas à modifier la couleur du fond noir à l'affichage de l'image en taille réelle et empêcher que la miniature se décale d'une ligne vers le bas si le nom est plus court que la largeur de la div. :(
Existe t-il une méthode ?
Merci d'avance pour votre aide. :D