Une galerie de photos automatique depuis un répertoire

Information sur le code

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.

GrayJoe

13 Juin 2023

Code Source à télécharger

Information sur les mises à jour

Dernière mise à jour :

24 Nov 2023
formatage de la description

2 805 vues

Compatibilité du code

PHP 5, PHP 7 et PHP 8

code classé dans Images - Graphisme

code source classé dans Images - Graphisme

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


                                    
                    
                    <?php
/*------------------------------*/
/*
 Titre : Une galerie de photos automatique depuis un répertoire                                                        
                                                                                                                          
 Auteur           : GrayJoe                                                                                               
 Date édition     : 13 Juin 2023                                                                                         
 Date mise a 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>


                   


                   

                    <?php
/*------------------------------*/
/*
 Titre : Une galerie de photos automatique depuis un répertoire                                                        
                                                                                                                          
 Auteur           : GrayJoe                                                                                               
 Date édition     : 13 Juin 2023                                                                                         
 Date mise a 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>