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

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

Bonjour @rthur :D
Voici mon dernier script :
[css]<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>[/css]
[code]<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>[/code]
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.

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

Firefox ne coupe pas les mots long avec break-word mais avec break-all

Je ne comprends pas : :(
[quote][color=#4000FF]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)[/color][/quote]
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 ?

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

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

Bonjour @rtur.
J'ai modifié le script comme suit :
[css]<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>[/css]
[code]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++;
}[/code]
Le nom du fichier se met sous la miniature mais ne se casse pas avec word-wrap:break-word ?

[quote=modus57 post_id=456396 time=1528733256 user_id=20096]
Par contre je ne vois comment écrire le nom du fichier sous la miniature ?[/quote]
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.

[quote=modus57 post_id=456396 time=1528733256 user_id=20096]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 ? [/quote]
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à

Bonjour @arthur.

J'ai corriger mon code en supprimant la ligne :
[code]//if (!in_array(end(explode('.', $item)), array('jpg','jpeg','png','gif'))) { continue; } //fonctionne pas[/code]
et en remplacant la ligne :
[code]foreach ($liste as $val)[/code]
par :
[code]foreach ($tab_image as $val)[/code]
Ç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

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
[quote]
Paramètre :
- array : Ce tableau est passé par référence car il sera modifié par la fonction. [b][color=#FF0000]Cela signifie que vous devez passer une vraie variable et non une fonction retournant un tableau,[/color][/b] car actuellement, seules les variables peuvent être passées par référence.[/quote]
Or à l'heure actuelle tu as la fonction explode() en paramètre de end()

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 :
[quote]Strict standards: Only variables should be passed by reference in C:\wamp64\www\... on line …[/quote]
Par contre il n'y a plus d'espace vide entre les miniatures.

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 ;)

Bonjour @rtur :D
Merci de t'intéresser à ma discussion et pour ta réponse.
La ligne qui ne fonctionne pas:
[code]//if (!in_array(end(explode('.', $item)), array('jpg','jpeg','png','gif'))) { continue; } //fonctionne pas
[/code]
Si je fais un :
[code]echo $item .'<br>';[/code]
ou:
[code]var_dump($item);[/code]
Ça renvoi la liste de tous les dossiers et fichiers contenus dans le répertoire et des espaces blancs entre les miniatures. :(

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

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][<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>[/code]
Une question complémentaire comment écrire le nom du fichier sous la miniature ?
Merci d'avance pour votre aide.