alpha_full/pages/accueil/accueil-M6.php

<style>
	.propuls{display: none;}
	.menuD-container{display: none;}

	/* Styles généraux pour une page responsive */
	body {
		font-family: Arial, sans-serif;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		padding: 20px;
	}

	.gallery {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 15px;
	}

	/* Styles des vignettes */
	.thumbnail {
		width: 150px;
		height: 150px;
		border-radius: 50%;
		overflow: hidden;
		cursor: pointer;
		transition: transform 0.3s ease;
	}

	.thumbnail img, .thumbnail video {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* Zoom sur la vignette quand on clique */
	.thumbnail:active {
		transform: scale(1.1);
	}

	/* Styles pour la modal de visualisation des vidéos/images */
	.modal {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.8);
		justify-content: center;
		align-items: center;
	}

	.modal-content {
		max-width: 90%;
		max-height: 90%;
	}

	.modal img, .modal video {
		width: 100%;
		height: auto;
	}

	/* Fermeture de la modal */
	.close {
		position: absolute;
		top: 20px;
		right: 20px;
		font-size: 30px;
		color: white;
		cursor: pointer;
	}

	/* Responsive */
	@media screen and (max-width: 600px) {
		.thumbnail {
			width: 100px;
			height: 100px;
		}
	}
</style>

<!-- if wbadm -->
<?php
	require_once ($includePath. "/_fonctions/fonctionItemMessage.php");
	include_once ($includePath. "/req/11-init.accueilMsgList.php");
	// ---------------------------------------------------
	// Affichage du mesage commercial
	// ---------------------------------------------------
	include ("accueil.reqSelect.messCom.php");
	if ($afficherMsgCom==1) {
		echo '<div id="messCom" '; 
			echo 'style="'; 
			if (isset ($styleMsgCom) && $styleMsgCom!='-') echo $styleMsgCom; 
			if ( $affMContext === true ) echo ' cursor:context-menu" '; else echo '" '; 
			echo 'data-tooltip="' .$titleTab. '" ';
			if ( $affMContext === true ) echo $mouseOverMenuContext. ' onContextMenu="return mContextuel( this, \'messCom\', \'titre\', 0, event );"';
			echo '>';
			echo '<i class="' .$icoTab. '"></i>&#160;&#160;<span>' .$messTab. '</span>';
		echo '</div>';
	}
	
	if ($_SESSION['isWbAdm']===true && $affMContext === true  ) {
			// <!-- Formulaire pour uploader des images/vidéos -->
			echo '<h3>Ajouter une image ou une vidéo </h3>';
			echo '<form  method="POST" enctype="multipart/form-data" >';
				echo '<label for="fileToUpload">Sélectionnez une image ou une vidéo :</label>';
				echo '<input type="file" name="fileToUpload" id="fileToUpload" required>';
				echo '<button type="submit">Uploader</button>';
			echo '</form>';
	}
	
	echo '<div class="gallery">';

	if (!empty($_FILES["fileToUpload"]["tmp_name"])) {
		$target_dir = "./Publication/accueil/caroussel/";
		$targetExtension =['jpeg', 'jpg', 'png', 'svg', 'bmp'];
		$targetSize ='5242880';	//5 Mo
		$largeurMax = 0;
		$hauteurMax = 0;
		$largeurMin = 0;
		$hauteurMin = 0;
		include ("./admin/adminInclude/_fonctions/uploadGenerique.php");
	 }
	 // else {Echo 'toto';}


	// Définir le dossier contenant les fichiers multimédia
	$media_dir = './Publication/accueil/caroussel/'; // Remplacez par le chemin de votre dossier

	// Extensions d'images et vidéos autorisées
	$image_extensions = array('jpg', 'jpeg', 'png', 'gif');
	$video_extensions = array('mp4', 'webm', 'ogg');

	// Vérification que le dossier existe
	if (is_dir($media_dir)) {
		// Ouvrir le dossier
		$files = scandir($media_dir);

		// Boucler sur chaque fichier dans le dossier
		foreach ($files as $file) {
			// Obtenir l'extension du fichier
			$file_extension = pathinfo($file, PATHINFO_EXTENSION);

			// Si c'est une image, afficher une vignette cliquable
			if (in_array(strtolower($file_extension), $image_extensions)) {
				echo '<div class="thumbnail" onclick="openModal(\'' . $media_dir . $file . '\', \'image\')" >';
				echo '<img src="' . $media_dir . $file . '" alt="Image"  />';
				echo '</div>';
			}

			// Si c'est une vidéo, afficher une vignette vidéo cliquable
			if (in_array(strtolower($file_extension), $video_extensions)) {
				echo '<div class="thumbnail" onclick="openModal(\'' . $media_dir . $file . '\', \'video\')" >';
				echo '<video src="' . $media_dir . $file . '"></video>';
				echo '</div>';
			}
		}
	} else {
		echo '<p>Dossier multimédia non trouvé.</p>';
	}
?>
</div>

<!-- Modal pour afficher le contenu en grand -->
<div id="modal" class="modal">
	<span class="close" onclick="closeModal()">&times;</span>
	<div class="modal-content">
		<img id="modalImage" style="display: none;" />
		<video id="modalVideo" controls autoplay style="display: none;"></video>
	</div>
</div>

<script>
	// Fonction pour ouvrir la modal et afficher le contenu (image ou vidéo)
	function openModal(src, type) {
		var modal = document.getElementById('modal');
		var modalImage = document.getElementById('modalImage');
		var modalVideo = document.getElementById('modalVideo');

		// Réinitialiser l'affichage
		modalImage.style.display = 'none';
		modalVideo.style.display = 'none';

		// Afficher l'image ou la vidéo selon le type
		if (type === 'image') {
			modalImage.src = src;
			modalImage.style.display = 'block';
		} else if (type === 'video') {
			modalVideo.src = src;
			modalVideo.style.display = 'block';
			modalVideo.play();
		}

		// Afficher la modal
		modal.style.display = 'flex';
	}

	// Fonction pour fermer la modal
	function closeModal() {
		var modal = document.getElementById('modal');
		var modalVideo = document.getElementById('modalVideo');

		modal.style.display = 'none';
		modalVideo.pause();
		modalVideo.src = '';  // Réinitialiser la vidéo pour qu'elle ne continue pas en arrière-plan
	}
</script>