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>
|
||||
127
event.php
127
event.php
|
|
@ -8,6 +8,7 @@ $page = 'Bonnes pratiques';
|
|||
session_start();
|
||||
if (!isset($_SESSION['connected']) || $_SESSION['connected'] == false) {
|
||||
header('location: login.php');
|
||||
exit;
|
||||
}
|
||||
|
||||
/* Récupération de l'évènement */
|
||||
|
|
@ -18,27 +19,129 @@ $couvertureImg = getEventBigImage($bdd, $_GET['event']);
|
|||
?>
|
||||
<!doctype html>
|
||||
<html lang="fr">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<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="stylesheet" href="./styles-scripts/photos.css">
|
||||
<link rel="stylesheet" href="./styles-scripts/event.css">
|
||||
|
||||
<style>
|
||||
/* Nettoyage des styles pour éviter les conflits Bootstrap sur le reste de la page */
|
||||
body {
|
||||
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'); ?>
|
||||
|
||||
<div class="banniere" style="background-image: url('<?= $couvertureImg ?>'); margin-bottom: 2px;">
|
||||
<div class="texte-banniere">
|
||||
<?= $titre ?>
|
||||
</div>
|
||||
</div>
|
||||
<?php foreach($images as $photo):?>
|
||||
<img src="<?= $photo["chemin"] ?>" alt="" style="max-width: 350px;">
|
||||
<?php endforeach ?>
|
||||
<h1><?= htmlspecialchars($titre) ?></h1>
|
||||
|
||||
<!-- 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>
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
|
||||
</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,10 +7,21 @@
|
|||
max-height: 75vh;
|
||||
}
|
||||
|
||||
.div1 { grid-area: 1 / 1 / 4 / 4; }
|
||||
.div2 { grid-area: 1 / 4 / 3 / 6; }
|
||||
.div3 { grid-area: 3 / 4 / 4 / 5; }
|
||||
.div4 { grid-area: 3 / 5 / 4 / 6; }
|
||||
.div1 {
|
||||
grid-area: 1 / 1 / 4 / 4;
|
||||
}
|
||||
|
||||
.div2 {
|
||||
grid-area: 1 / 4 / 3 / 6;
|
||||
}
|
||||
|
||||
.div3 {
|
||||
grid-area: 3 / 4 / 4 / 5;
|
||||
}
|
||||
|
||||
.div4 {
|
||||
grid-area: 3 / 5 / 4 / 6;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
|
|
@ -30,11 +41,9 @@ img{
|
|||
align-items: flex-end;
|
||||
padding: 20px;
|
||||
|
||||
background: linear-gradient(
|
||||
to top,
|
||||
background: linear-gradient(to top,
|
||||
rgba(0, 0, 0, 0.75),
|
||||
rgba(0,0,0,0)
|
||||
);
|
||||
rgba(0, 0, 0, 0));
|
||||
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
|
|
@ -57,8 +66,10 @@ img{
|
|||
}
|
||||
|
||||
.banniere {
|
||||
height: 400px; /* hauteur de la bannière */
|
||||
background-size: cover; /* effet image coupée */
|
||||
height: 400px;
|
||||
/* hauteur de la bannière */
|
||||
background-size: cover;
|
||||
/* effet image coupée */
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
|
|
@ -79,7 +90,8 @@ img{
|
|||
|
||||
/* texte */
|
||||
.texte-banniere {
|
||||
position: relative; /* important pour passer au-dessus du voile */
|
||||
position: relative;
|
||||
/* important pour passer au-dessus du voile */
|
||||
color: white;
|
||||
font-size: 3rem;
|
||||
font-weight: bold;
|
||||
|
|
|
|||
Loading…
Reference in a new issue