Diaporama d'images sans modification du code
Bonjour,
Je suis en train de me renseigner sur la possibilité de faire un diaporama d'images (photos) placées dans un dossier spécifique sans avoir à reprogrammer le code.
Jusqu'à présent, je trouve de belles choses mais chaque image nécessite d'aller dans le code et c'est quand même un peu lourd.
J'estime que l'idéal est d'avoir une simple déclaration de l'image dans un fichier (de type à inclure), avec son nom et des caractéristiques comme une description, la position dans le diaporama et éventuellement le temps d'affichage si on passe en mode automatique.
De plus, il faut aussi autoriser des tailles/proportions différentes. Avez-vous un piste pour moi ?
Merci !
diaporama, problème (CSS ?)
Bonjour,
Je continue sur ce sujet car je ne suis pas loin d'une solution, mais il reste un problème, fort probablement dans le CSS. (Si nécessaire je laisse un admin juger s'il faut déplacer la discussion ou pas)
Je l'ai adapté en PHP qui n'a qu'à lire un fichier .csv contenant les infos des photos. Je n'ai que cela à modifier pour ajouter, retirer, agencer ...
La page est construite en une structure (quasi) identique à l'originale.
Je n'ai pas touché au code JS, mais j'ai bien modifié le CSS pour accepter des tailles de photos quelconques, la position des "dot" de navigation au dessus des photos et le texte descriptif dans le haut de la photo.
Cependant, quand j'essaie cela chez moi avec WampServer (php 7.4.26) La première image n'est pas affichée (mais on voit le cadre qu'elle devrait occuper).
Et quand je l'essaie chez OVH (PHP 7.4 stable 64) ce sont la première et dernière image qui ne sont pas visibles. https://cambier.eu/photo/test/
Où ai-je fait l'erreur ?
Merci d'avance de m'aiguiller.
PS : j'ai bien entendu vérifié les images en changeant la position des lignes dans le .csv, se sont toujours les 1ère et dernière.
Édit , en regardant et comparant le code html de l'exemple et celui que créait mon PHP, j'ai remarqué que dans l'original, la <div class="slide-dot"> était en dehors de la <div class="slide-container"> J'ai corrigé cela, mais, comme je m'en doutais, cela ne change rien.
Code:
1
2
3
4
| ./photos/;portrait.jpg;Votre serviteur (en 2020)
./photos/;Dsc00773.jpg;Lorem ipsum dolor sit amet, consectetur adipiscing elit
./photos/;DSC00103.jpg;Nullam luctus aliquam ornare
./photos/;Elise.JPG;Jeune fille au chapeau de paille, sous le soleil au zénith |
Il inclut le JS que j'isole en dessous (plus lisible)
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Pascal Cambier, photographe amateur</title>
<link href="photo.css" rel="stylesheet" type="text/css">
</head>
<body bgcolor="#000">
<?php
/* d'après https://www.codeur.com/tuto/css/creer-diaporama-image-html-css#creer_un_diaporama_dimages_en_css_et_js */
$fichier = file( "photos.csv" ); // coordonnées et descriptif photos
$fichier = array_map( 'trim', $fichier );
$datas = array();
foreach ( $fichier as $ele ) {
$datas[] = explode( ';', $ele ); // ta bleau à 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 = dossier
1 = nom du fichier
2 = description (peut contenir des <br>)
*/
echo '<div class="custom-slider fade">';
echo '<img class="slide-img" src="' . $ligne[ 0 ] . $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">
// détaillé en dessous
</script>
</body>
</html> |
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
| <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> |
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
| @charset "utf-8";
/* CSS Document */
.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;*/
color: #ABDB15;
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: 15px;
padding: 15px;
/*bottom: 15px;*/
width: 100%;
text-align: center;
}
.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}
} |
