Je programme un diaporama https://cambier.eu/photo/ qui ne me pose pas de problème jusqu'au moment où j'ai désiré ajouter de l'audio sur une photo.
Principe : la description des photos est dans un fichier .csv qui est lu en PHP.
Donc ici à la 6ème photo, le contrôle est bien au-dessus de la photo. Mais... il est aussi présent sous les autres photos. Je ne comprends pas
Auriez-vous une idée ?
Merci !
Le CSV, structure d'une ligne en array :
0 == type : 'i' = image 'ia' image avec audio 'v' = vidéo
1 == dossier et nom du fichier image ou vidéo
2 == description (peut contenir des balises)
3 == si 'ia' = dossier + nom fichier audio (.mp3)
i;./photos/portrait.jpg;Autoportrait de votre serviteur<br>(En 2020)
i;./photos/Il essai NB (001).jpg;« Il... » mai 2022 - pas assez nette, à refaire
i;./photos/Il essai RGB (001).jpg; Toujours « Il... », mais obnibulé par les couleurs,<br> j'en oublie le cadrage.<br> On fera mieux la prochaine fois !
i;./photos/Dsc00773.jpg;Lors de mes premiers essais,<br>ici avec G... (1/2)
i;./photos/DSC00103.jpg;Lors de mes premiers essais,<br>ici avec G... (2/2)
ia;./photos/Elise.jpg;Sous le soleil,<br><b>exactement !</b><br>Jeune fille au chapeau de paille;./audios/sous_le_soleil_exactement.mp3<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Pascal Cambier, photographe amateur</title>
<link href="photo.css" rel="stylesheet" type="text/css">
</head>
// d'après https://www.codeur.com/tuto/css/creer-diaporama-image-html-css#creer_un_diaporama_dimages_en_css_et_js
<body bgcolor="#000">
<?php
$fichier = file( "photos.csv" ); // coordonnées et descriptif photos
$fichier = array_map( 'trim', $fichier );
$datas = array();
foreach ( $fichier as $ele ) {
$datas[] = explode( ';', $ele ); // tableau à deux dimensions
}
$row = count( $datas );
echo '<div class="slide-dot">';
for ( $l = 1; $l <= $row; $l++ ) { // construction des "dot", les points permettant de choisir une image
echo '<span class="dot" onclick="currentSlide(' . $l . ')"></span>';
}
echo '</div>';
echo '<div class="slide-container">';
for ( $l = 0; $l < $row; $l++ ) { // lecture de la 1ère dimension (ligne)
$ligne = $datas[ $l ]; // la 2ème dimension
/*
0 == type : 'i' = image 'ia' image avec audio 'v' = vidéo
1 == dossier et nom du fichier image ou vidéo
2 == description (peut contenir des balises)
3 == si 'ia' = dossier + nom fichier audio (.mp3)
*/
$tp = $ligne[ 0 ];
if ( $tp == 'i' || $tp == 'ia' ) {
if ( $tp == 'ia' ) {
echo '<div class ="control_audio">';
echo '<audio controls loop>';
echo '<source src="' . $ligne[ 3 ] . '" type="audio/mp3">';
echo '<p>Votre navigateur est trop ancien pour lire ce fichier</p>';
echo '</audio>';
echo '</div>';
}
echo '<div class="custom-slider fade">';
echo '<img class="slide-img" src="' . $ligne[ 1 ] . '">';
echo '<div class="slide-index">' . ( $l + 1 ) . ' / ' . $row . '</div> ';
echo '<div class="slide-text">' . $ligne[ 2 ] . '</div> ';
echo '</div>';
}
}
?>
<a class="prev" onclick="plusSlides(-1)">❮</a> <a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
</div>
<script type= "text/javascript">
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("custom-slider");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
</script>
</body>
</html>
@charset "utf-8";
/* CSS Document */
/* CSS diapo avec JS */
.control_audio {
text-align: center;
}
.custom-slider {
display: none;
}
.slide-container {
max-width: 800px;
position: relative;
margin: auto;
}
.prev, .next {
cursor: pointer;
/*position: absolute;
top: 50%;*/
position: absolute;
top: 100px;
transform: translateY(-50%);
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
color: white;
font-size: 30px;
background-color: rgba(0,0,0,0);
transition: background-color 0.6s ease;
}
.prev{ left: 15px; }
.next { right: 15px; }
.prev:hover, .next:hover, .slide-text:hover {
background-color: rgba(0,0,0,0.5);
}
.slide-text {
position: absolute;
top: 150px;
color:#ABDB15 ;
font-size: 1.5em;
padding: 15px;
/*bottom: 15px;*/
width: 100%;
text-align: center;
text-shadow: black 0.1em 0.1em 0.1em
}
.slide-index {
color: #ABDB15;
font-size: 13px;
padding: 15px;
position: absolute;
top: 10px;
}
.slide-img{
width: 100%;
/*height: 300px;*/
object-fit: cover;
object-position: center;
}
.slide-dot{ text-align: center; }
.dot {
cursor: pointer;
height: 10px;
width: 10px;
margin: 0 2px;
background-color: #999999;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover { background-color: #111111; }
.fade {
animation-name: fade;
animation-duration: 1s;
}
@keyframes fade {
from {opacity: 0}
to {opacity: 1}
}
