système de diaporama v1
This commit is contained in:
parent
a29542f30e
commit
320cb3ffb3
5 changed files with 355 additions and 34 deletions
75
diapo.php
Normal file
75
diapo.php
Normal file
|
|
@ -0,0 +1,75 @@
|
||||||
|
<?php
|
||||||
|
include("./Assets/functions.php");
|
||||||
|
$config = json_decode(file_get_contents("./Assets/config.json"), true);
|
||||||
|
$bdd = connectBDD("localhost", $config["BDD_USER"], $config["BDD_PASSWD"], $config["BDD_NAME"]);
|
||||||
|
?>
|
||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Mon Diaporama Auto</title>
|
||||||
|
<link rel="stylesheet" href="./styles-scripts/diapo.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="controls">
|
||||||
|
<button class="btn-control" onclick="toggleFullScreen()" id="fs-btn">Plein écran</button>
|
||||||
|
<button class="btn-control btn-quit" onclick="window.location.href='photos.php'">Quitter</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="slideshow-container">
|
||||||
|
<?php
|
||||||
|
$images = getEventImages($bdd, $_GET['event']);
|
||||||
|
foreach($images as $image): ?>
|
||||||
|
<div class="slide fade">
|
||||||
|
<img src="<?php echo $image["chemin"]; ?>" alt="Diapo">
|
||||||
|
</div>
|
||||||
|
<?php endforeach; ?>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
let slideIndex = 0;
|
||||||
|
const intervalTime = 5000;
|
||||||
|
|
||||||
|
function showSlides() {
|
||||||
|
let slides = document.getElementsByClassName("slide");
|
||||||
|
if (slides.length === 0) return; // Sécurité si aucune image
|
||||||
|
|
||||||
|
for (let i = 0; i < slides.length; i++) {
|
||||||
|
slides[i].style.display = "none";
|
||||||
|
}
|
||||||
|
|
||||||
|
slideIndex++;
|
||||||
|
if (slideIndex > slides.length) { slideIndex = 1 }
|
||||||
|
|
||||||
|
slides[slideIndex-1].style.display = "block";
|
||||||
|
setTimeout(showSlides, intervalTime);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Fonction Plein Écran
|
||||||
|
function toggleFullScreen() {
|
||||||
|
if (!document.fullscreenElement) {
|
||||||
|
document.documentElement.requestFullscreen().catch(err => {
|
||||||
|
alert(`Erreur : ${err.message}`);
|
||||||
|
});
|
||||||
|
document.getElementById('fs-btn').textContent = "Quitter plein écran";
|
||||||
|
} else {
|
||||||
|
if (document.exitFullscreen) {
|
||||||
|
document.exitFullscreen();
|
||||||
|
document.getElementById('fs-btn').textContent = "Plein écran";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Écouter le changement de plein écran (touche Échap par exemple)
|
||||||
|
document.addEventListener('fullscreenchange', () => {
|
||||||
|
const btn = document.getElementById('fs-btn');
|
||||||
|
if (!document.fullscreenElement) {
|
||||||
|
btn.textContent = "Plein écran";
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
window.onload = showSlides;
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
139
event.php
139
event.php
|
|
@ -6,8 +6,9 @@ $page = 'Bonnes pratiques';
|
||||||
|
|
||||||
/* Gestion de la connexion */
|
/* Gestion de la connexion */
|
||||||
session_start();
|
session_start();
|
||||||
if(!isset($_SESSION['connected']) || $_SESSION['connected'] == false){
|
if (!isset($_SESSION['connected']) || $_SESSION['connected'] == false) {
|
||||||
header('location: login.php');
|
header('location: login.php');
|
||||||
|
exit;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Récupération de l'évènement */
|
/* Récupération de l'évènement */
|
||||||
|
|
@ -18,27 +19,129 @@ $couvertureImg = getEventBigImage($bdd, $_GET['event']);
|
||||||
?>
|
?>
|
||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="fr">
|
<html lang="fr">
|
||||||
<head>
|
|
||||||
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<title>Intranet de l'APEI</title>
|
<title>Intranet de l'APEI</title>
|
||||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||||
<link rel="shortcut icon" href="./Assets/Icones/APEIMBGE.jpg" type="image/x-icon">
|
<link rel="shortcut icon" href="./Assets/Icones/APEIMBGE.jpg" type="image/x-icon">
|
||||||
<link rel="stylesheet" href="./styles-scripts/photos.css">
|
<link rel="stylesheet" href="./styles-scripts/event.css">
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<?php include('./Assets/navbar.php');?>
|
|
||||||
|
|
||||||
<div class="banniere" style="background-image: url('<?= $couvertureImg ?>'); margin-bottom: 2px;">
|
<style>
|
||||||
<div class="texte-banniere">
|
/* Nettoyage des styles pour éviter les conflits Bootstrap sur le reste de la page */
|
||||||
<?= $titre ?>
|
body {
|
||||||
</div>
|
overflow-x: hidden; /* Sécurité anti-scroll horizontal */
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-grid-container {
|
||||||
|
width: 100%;
|
||||||
|
padding: 0 15px; /* Évite que les images collent aux bords de l'écran */
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Clearfix pour contenir les éléments en float */
|
||||||
|
.custom-grid-container::after {
|
||||||
|
content: "";
|
||||||
|
display: table;
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-column {
|
||||||
|
float: left;
|
||||||
|
width: 25%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 5px; /* Espacement entre les images */
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-column img {
|
||||||
|
width: 100%;
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
padding: 20px 15px;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<?php include('./Assets/navbar.php'); ?>
|
||||||
|
|
||||||
|
<h1><?= htmlspecialchars($titre) ?></h1>
|
||||||
|
|
||||||
|
<div class="custom-grid-container">
|
||||||
|
<?php
|
||||||
|
$nbColumns = 4;
|
||||||
|
$rowsPerColumn = 5;
|
||||||
|
$columns = [];
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Vérifie si une image peut être placée à une position donnée
|
||||||
|
*/
|
||||||
|
function canPlace($columns, $col, $row, $imagePath)
|
||||||
|
{
|
||||||
|
// Vérifie le dessus
|
||||||
|
if ($row > 0 && isset($columns[$col][$row - 1]) && $columns[$col][$row - 1] === $imagePath) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
if ($col > 0) {
|
||||||
|
// Gauche
|
||||||
|
if (isset($columns[$col - 1][$row]) && $columns[$col - 1][$row] === $imagePath) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
// Diagonale Haut-Gauche
|
||||||
|
if ($row > 0 && isset($columns[$col - 1][$row - 1]) && $columns[$col - 1][$row - 1] === $imagePath) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
// Diagonale Bas-Gauche
|
||||||
|
if (isset($columns[$col - 1][$row + 1]) && $columns[$col - 1][$row + 1] === $imagePath) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Construction de la structure de données
|
||||||
|
for ($col = 0; $col < $nbColumns; $col++) {
|
||||||
|
$columns[$col] = [];
|
||||||
|
|
||||||
|
for ($row = 0; $row < $rowsPerColumn; $row++) {
|
||||||
|
shuffle($images);
|
||||||
|
$placed = false;
|
||||||
|
|
||||||
|
foreach ($images as $img) {
|
||||||
|
if (canPlace($columns, $col, $row, $img['chemin'])) {
|
||||||
|
$columns[$col][$row] = $img['chemin'];
|
||||||
|
$placed = true;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Fallback si pas de solution trouvée (cas avec 2-3 images)
|
||||||
|
if (!$placed && !empty($images)) {
|
||||||
|
$columns[$col][$row] = $images[0]['chemin'];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Affichage manuel sans classes Bootstrap conflictuelles
|
||||||
|
for ($col = 0; $col < $nbColumns; $col++): ?>
|
||||||
|
<div class="custom-column">
|
||||||
|
<?php foreach ($columns[$col] as $imgPath): ?>
|
||||||
|
<img src="<?= $imgPath ?>" alt="Image évènement">
|
||||||
|
<?php endforeach; ?>
|
||||||
|
</div>
|
||||||
|
<?php endfor; ?>
|
||||||
</div>
|
</div>
|
||||||
<?php foreach($images as $photo):?>
|
<button type="button" class="btn btn-primary" style="position: fixed; bottom: 20px; right: 20px;" onclick="window.location.href='diapo.php?event=<?= $_GET['event'] ?>'">Diaporama</button>
|
||||||
<img src="<?= $photo["chemin"] ?>" alt="" style="max-width: 350px;">
|
|
||||||
<?php endforeach ?>
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
<!-- footer pas toucher -->
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
</html>
|
||||||
74
styles-scripts/diapo.css
Normal file
74
styles-scripts/diapo.css
Normal file
|
|
@ -0,0 +1,74 @@
|
||||||
|
body, html {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: black;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slideshow-container {
|
||||||
|
position: relative;
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide {
|
||||||
|
display: none; /* Caché par défaut */
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: contain; /* Respecte le ratio, fond noir si besoin */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Animation de transition simple */
|
||||||
|
.fade {
|
||||||
|
animation: fadeAnim 1.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeAnim {
|
||||||
|
from { opacity: .4 }
|
||||||
|
to { opacity: 1 }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Conteneur des contrôles */
|
||||||
|
.controls {
|
||||||
|
position: fixed;
|
||||||
|
top: 20px;
|
||||||
|
right: 20px;
|
||||||
|
z-index: 100;
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
opacity: 0.3; /* Discret par défaut */
|
||||||
|
transition: opacity 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls:hover {
|
||||||
|
opacity: 1; /* S'éclaire au survol */
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-control {
|
||||||
|
background: rgba(255, 255, 255, 0.2);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.4);
|
||||||
|
color: white;
|
||||||
|
padding: 10px 15px;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 5px;
|
||||||
|
font-family: sans-serif;
|
||||||
|
backdrop-filter: blur(5px); /* Effet verre dépoli */
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-control:hover {
|
||||||
|
background: rgba(255, 255, 255, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-quit {
|
||||||
|
background: rgba(220, 53, 69, 0.6); /* Rouge pour quitter */
|
||||||
|
}
|
||||||
57
styles-scripts/event.css
Normal file
57
styles-scripts/event.css
Normal file
|
|
@ -0,0 +1,57 @@
|
||||||
|
/* grid */
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-family: Arial;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
text-align: center;
|
||||||
|
padding: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row {
|
||||||
|
display: -ms-flexbox;
|
||||||
|
/* IE10 */
|
||||||
|
display: flex;
|
||||||
|
-ms-flex-wrap: wrap;
|
||||||
|
/* IE10 */
|
||||||
|
flex-wrap: wrap;
|
||||||
|
padding: 0 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Create four equal columns that sits next to each other */
|
||||||
|
.column {
|
||||||
|
-ms-flex: 25%;
|
||||||
|
/* IE10 */
|
||||||
|
flex: 25%;
|
||||||
|
max-width: 25%;
|
||||||
|
padding: 0 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.column img {
|
||||||
|
margin-top: 8px;
|
||||||
|
vertical-align: middle;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive layout - makes a two column-layout instead of four columns */
|
||||||
|
@media screen and (max-width: 800px) {
|
||||||
|
.column {
|
||||||
|
-ms-flex: 50%;
|
||||||
|
flex: 50%;
|
||||||
|
max-width: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
|
||||||
|
@media screen and (max-width: 600px) {
|
||||||
|
.column {
|
||||||
|
-ms-flex: 100%;
|
||||||
|
flex: 100%;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -7,18 +7,29 @@
|
||||||
max-height: 75vh;
|
max-height: 75vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
.div1 { grid-area: 1 / 1 / 4 / 4; }
|
.div1 {
|
||||||
.div2 { grid-area: 1 / 4 / 3 / 6; }
|
grid-area: 1 / 1 / 4 / 4;
|
||||||
.div3 { grid-area: 3 / 4 / 4 / 5; }
|
}
|
||||||
.div4 { grid-area: 3 / 5 / 4 / 6; }
|
|
||||||
|
|
||||||
img{
|
.div2 {
|
||||||
|
grid-area: 1 / 4 / 3 / 6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.div3 {
|
||||||
|
grid-area: 3 / 4 / 4 / 5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.div4 {
|
||||||
|
grid-area: 3 / 5 / 4 / 6;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
.parent > div {
|
.parent>div {
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
@ -30,11 +41,9 @@ img{
|
||||||
align-items: flex-end;
|
align-items: flex-end;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
|
|
||||||
background: linear-gradient(
|
background: linear-gradient(to top,
|
||||||
to top,
|
rgba(0, 0, 0, 0.75),
|
||||||
rgba(0,0,0,0.75),
|
rgba(0, 0, 0, 0));
|
||||||
rgba(0,0,0,0)
|
|
||||||
);
|
|
||||||
|
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity 0.3s ease;
|
transition: opacity 0.3s ease;
|
||||||
|
|
@ -48,17 +57,19 @@ img{
|
||||||
transition: transform 0.3s ease;
|
transition: transform 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.parent > div:hover .overlay {
|
.parent>div:hover .overlay {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.parent > div:hover .overlay p {
|
.parent>div:hover .overlay p {
|
||||||
transform: translateY(0);
|
transform: translateY(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.banniere {
|
.banniere {
|
||||||
height: 400px; /* hauteur de la bannière */
|
height: 400px;
|
||||||
background-size: cover; /* effet image coupée */
|
/* hauteur de la bannière */
|
||||||
|
background-size: cover;
|
||||||
|
/* effet image coupée */
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
|
|
||||||
|
|
@ -79,7 +90,8 @@ img{
|
||||||
|
|
||||||
/* texte */
|
/* texte */
|
||||||
.texte-banniere {
|
.texte-banniere {
|
||||||
position: relative; /* important pour passer au-dessus du voile */
|
position: relative;
|
||||||
|
/* important pour passer au-dessus du voile */
|
||||||
color: white;
|
color: white;
|
||||||
font-size: 3rem;
|
font-size: 3rem;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue