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