Une galerie de photos automatique depuis un répertoire

  Information

On charge les photos dans un repertoire du serveur. On crée le fichier galerie.php par exemple avec le code et on appel ce fichier qui est dans le même répertoire que les images. Ce code liste les jpg mais rien n'empêche d'ajouter des gif(s) et png(s) par la fonction glob. J'ai ajouté un affichage modal au clic, les variables sont basiques.

  code source classé dans  Images - Graphisme

 
 01    
 02    
 03    
 04    
 05    
 06    
 07    
 08    
 09    
 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    
 36    
 37    
 38    
 39    
 40    
 41    
 42    
 43    
 44    
 45    
 46    
 47    
 48    
 49    
 50    
 51    
 52    
 53    
 54    
 55    
 56    
 57    
 58    
 59    
 60    
 61    
 62    
 63    
 64    
 65    
 66    
 67    
 68    
 69    
 70    
 71    
 72    
 73    
 74    
 75    
 76    
 77    
 78    
 79    
 80    
 81    
 82    
 83    
 84    
 85    
 86    
 87    
 88    
 89    
 90    
 91    
 92    
 93    
 94    
 95    
 96    
 97    
 98    
 99    
 100    
 101    
 102    
 103    
 104    
 105    
 106    
 107    
 108    
 109    
 110    
 111    
 112    
 113    
 114    
 115    
 116    
 117    
 118    
 119    
 120    
 121    
 122    
 123    
 124    
 125    
 126    
 127    
 128    
 129    
 130    
 131    
 132    
 133    
 134    
 135    
 136    
 137    
 138    
 139    
 140    
 141    
 142    
 143    
 144    
 145    
 146    
 147    
 148    
 149    
 150    
 151    
 152    
 153    
 154    
 155    
 156    
 157    
 158    
 159    
 160    
 161    
 162    
 163    
 164    
 165    
 166    
 167    
 168    
 169    
 170    
 171    
 172    
 173    
 174    
 175    
                               
<?php
/*---------------------------------------------------------------*/
/*
    Titre : Une galerie de photos automatique depuis un répertoire                                                       
                                                                                                                          
    URL   : https://phpsources.net/code_s.php?id=1165
    Auteur           : GrayJoe                                                                                            
    Date édition     : 13 Juin 2023                                                                                       
    Date mise à jour : 24 Nov 2023                                                                                       
    Rapport de la maj:                                                                                                    
    - formatage de la description                                                                                         
*/
/*---------------------------------------------------------------*/
$titre='Ma super galerie de photos';
$files=glob("./*.jpg");
$vue='<div class="main">
<h1>'.$titre.'</h1>
<div class="gallery">';

foreach($files as $file){
        $vue.='<div class="gallery__item">
        <img src="'.$file.'" height="60px">
        </div>';
}        

$vue.='</div>
</div>';
?>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script async src="https://kit.fontawesome.com/6cc05e1e8e.js"
 crossorigin="anonymous"></script>
<link rel="stylesheet" href="./style.css">
<meta charset="UTF-8" />
<title><?php echo $titre;?></title>
<style>
.closeBtn {
    color: rgba(255, 255, 255, 0.87);
    font-size: 25px;
    position: absolute;
    top: 0;
    right: 0;
    margin: 20px;
    cursor: pointer;
    transition: 0.2s ease-in-out;
}

.closeBtn:hover {
    color: rgb(255, 255, 255);
}

/*Image modal*/

.modal {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.733);
    margin-top: -1px;
    animation: zoom 0.3s ease-in-out;
}

@keyframes zoom {
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}
.modal img {
    width: 50%;
    object-fit: cover;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.main {
    width: 100%;
    flex-direction: column;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0px 60px 0px;
}

h1 {
    margin: 10px 0px 30px 0px;
    font-family: cursive;
    color: rgb(0, 6, 90);
    font-size: 50px;
}

.gallery {
    display: grid;
    width: 90%;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 10px;
}

.gallery__item {
    cursor: pointer;
    overflow: hidden;
    border-radius: 4px;
}

.gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.3s ease-in-out;
}

.gallery__item img:hover {
    transform: scale(1.1);
}

@media (max-width: 950px) {
    .gallery {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 550px) {
    .gallery {
        grid-template-columns: repeat(1, 1fr);
    }
}
</style>
</head>
<body>
<?php echo $vue;?>
<script>
const images = document.querySelectorAll(".gallery__item img");
let imgSrc;
// get images src onclick
images.forEach((img) => {
    img.addEventListener("click", (e) => {
        imgSrc = e.target.src;
        //run modal function
        imgModal(imgSrc);
    });
});
//creating the modal
let imgModal = (src) => {
    const modal = document.createElement("div");
    modal.setAttribute("class", "modal");
    //add the modal to the main section or the parent element
    document.querySelector(".main").append(modal);
    //adding image to modal
    const newImage = document.createElement("img");
    newImage.setAttribute("src", src);
    //creating the close button
    const closeBtn = document.createElement("i");
    closeBtn.setAttribute("class", "fas fa-times closeBtn");
    //close function
    closeBtn.onclick = () => {
        modal.remove();
    };
    modal.append(newImage, closeBtn);
};
</script>
</body>
</html>

          Fonctions du code - Doc officielle PHP

   php.net   Description Versions PHP OUTIL
   echo Affiche une chaîne de caractères PHP 4, PHP 5, PHP 7, PHP 8
   glob Recherche des chemins qui vérifient un masque - (PHP 4 >= 4.3.0, PHP 5, PHP 7) PHP 4, PHP 5, PHP 7, PHP 8

   Dites merci aux auteurs pour leurs travail, ça ne coûte rien et ça fait toujours plaisir wink

 Autres snippets qui pourraient vous intéressez

Calcul le nombre de jours écoulés depuis l'an zéro

Compatibilité : PHP 5, PHP 7

Cette fonction renvoie le facteur d'une date qui est le nombre de jours écoulés depuis le jour théorique de la naissance de J.C.

Passer les informations a une variable global depuis une classe - PHP Sources

Compatibilité : PHP 5, PHP 7

Accéder aux informations de vos variables globales depuis une classe.

Redirection automatique de http a https avec PHP

Compatibilité : PHP 5, PHP 7

Pour sécuriser vos websites qui ont des systèmes des paiements en ligne ou autres applications nécessitant https.

Prestashop code PHP pour bulk mass Photos Upload

Compatibilité : PHP 5, PHP 7

Ce code permet de générer les vignettes sur Prestashop à la volée. Vous pouvez avec ce code uploader des centaines, des milliers de photos en 1 clic.

Ecrire un texte dans une image avec retour à la ligne automatique - PHP Sources

Compatibilité : PHP 5, PHP 7

Cette fonction vous permettra d'intégrer du texte sur une image avec un retour à la ligne automatique au bout d'une longueur de texte définie sans

Présentation de PHP

PHP débutant et initié 50 Tutoriel

Présentation de MySQL

avatar

GrayJoe

  13 Juin 2023

  SOURCE   Télécharger

Information sur les mises à jour

Dernière mise à jour :

    24 Nov 2023
    formatage de la description

436 Vues
Compatibilité
PHP 5, 7 et 8+
54 codes

Catégorie :  Images - Graphisme

Ajoute à votre image un cadre noir 3D
Ajouter un logo en filigrane (watermark) sur ses images
Composantes d'une image
concaténation d'images pour faire des sprites CSS
Connaitre la taille d'une image et son format
Création d'images miniatures
Création d'images miniatures carrés
Créer des images fractales
Crée des titres sympa
Creer un camembert 2D facilement
Créer une vignette avec GD en se basant sur le type d'image
Crop d'une image JPEG
Dessine un polygone régulier
Dessine un polygone regulier plein
Donne la couleur opposée d'une couleur
Ecrire des nombres dans une images, sans police
Ecrire un texte dans une image avec retour à la ligne automatique
Ecrire un texte dans une image PNG
Ecrire un texte sur une image - Code de base
Effet miroir sur des images
Effet solarisation
Egalisation des couleurs d'une image
Explorer et visionner des images dans un répertoire
Extrait un canal de couleur d'une image
Fabrication d'une vignette et sauvegarde de la vignette
Fonction hexadécimal vers RVB (RGB)
Fonctions imagecreatefrombmp et imagebmp
Générer une image aléatoire
GD/Graphiques
Homothétie d'une image
Image aléatoire
Image en noir et blanc
Image transparente
Images Miniatures
Ligne diagonale
Modifications des composantes
Photo du jour choisi de manière aléatoire à partir d'un répertoire
Redimensionne des images JPG et PNG
Redimensionner image en gardant les proportions
Redimensionner une image
Redimensionner une image sans distorsion
Regarde si l'image est présente sur le serveur
Représentation graphique
Rotation de triangle
Rotation image
Sélectionne et affiche la dernière image mise à jour
Sépia aspect ancien
Symétrie horizontale
Taille image maximum en pixels
Texte multi-lignes sur une image avec une police PostScript Type1
Texte ombré en police TrueType
Transparence simple sur une image
Un masque sur une image
Une galerie de photos automatique depuis un répertoire