Diaporama en php

**kiwki** · 12/06/2017, 15h55

Bonjour, j'écris ces lignes pour avoir de l'aide.
Je souhaite faire un diaporama avec des images qui sont dans un dossier, je me suis renseigner et il se trouve que le php est le langage le plus adapté pour cela.

Problème! Je n'ai jamais fais de php, je voulais donc savoir si quelqu'un pouvait m'aider.
Pour l'instant j'ai un script super simple en html qui affiche juste les images et je voudrais quel soit en diaporama, une image à la fois et qui change tout les temps et temps de secondes.
La page web final n'afficheras que le diaporama pas de texte ou autre.

Merci d'avance pour l'aide apporté

Invité · 12/06/2017, 16h03

Bonjour,

PHP peut te permettre d'aller chercher les images dans ton dossier, et de les inclure dans ta page HTML (qui devra avoir l'extension .php)
Ensuite, c'est plutôt JavaScript/jQuery * qui assurera l'animation.

Les scripts tout-fait, ce n'est pas ce qui manque sur le web :

"slider images"
"jquery carousel"
"galerie photos"

Tu n'as que l'embarras du choix...

* On peut aussi envisager une animation purement en CSS, pour un nombre restreint et connu d'images.
Pas forcément adapté à ton besoin.

Envoyé par kiwki

...Pour l'instant j'ai un script super simple en html qui affiche juste les images...

Si tu es déjà en mesure d'afficher les images dans ton fichier HTML, alors tu n'as pas forcément besoin de PHP.

**Nazoïde** · 12/06/2017, 16h04

Il y' a début à toute chose. php.net/manual/fr/
Ce n'est pas du php qu'il te faut, mais du CSS.

**kiwki** · 13/06/2017, 08h05

Merci pour vos réponses rapide! J'aurais encore deux petites questions

j'ai trouvé deux codes pour l'affichage et la diffusion automatique
Voici celui pour la diffusion automatique:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var slideIndex = 0;
showSlides();
 
function showSlides() {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    for (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, 2000); // Change image every 2 seconds
}

Et voici celui pour le défilement :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
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("mySlides");
  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";
}

Try it Yourself »

**kiwki** · 13/06/2017, 08h06

Es-ce-que quelqu'un pourrait juste m'expliquer dans les grandes lignes comment il marche et comment les assembler.

Invité · 13/06/2017, 08h59

Ben non...

On ne connait ni le code HTML associé, ni la page ou tu l'as trouvé...
Cherche la documentation qui va avec...

**kiwki** · 13/06/2017, 09h12

Oups désolé

Voici le lien ou je l'ai trouvé:

https://www.w3schools.com/howto/howto_js_slideshow.asp

le code final donne ceci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing:border-box}
body {font-family: Verdana,sans-serif;}
.mySlides {display:none}
 
/* Slideshow container */
.slideshow-container {
  max-width: 1296px;
  position: relative;
  margin: auto;
}
 
/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}
 
/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}
 
/* The dots/bullets/indicators */
.dot {
  height: 13px;
  width: 13px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
 
.active {
  background-color: #717171;
}
 
/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}
 
@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}
 
@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}
 
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}
</style>
</head>
<body>
 
<div class="slideshow-container">
 
<div class="mySlides fade">
  <div class="numbertext">1 / 3</div>
  <img src="001.jpg" style="width:100%">
  <div class="text">Caption Text</div>
</div>
 
<div class="mySlides fade">
  <div class="numbertext">2 / 3</div>
  <img src="002.jpg" style="width:100%">
  <div class="text">Caption Two</div>
</div>
 
<div class="mySlides fade">
  <div class="numbertext">3 / 3</div>
  <img src="003.jpg" style="width:100%">
  <div class="text">Caption Three</div>
</div>
 
</div>
<br>
 
<div style="text-align:center">
  <span class="dot"></span> 
  <span class="dot"></span> 
  <span class="dot"></span> 
</div>
 
<script>
var slideIndex = 0;
showSlides();
 
function showSlides() {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("dot");
    for (i = 0; i < slides.length; i++) {
       slides[i].style.display = "none";  
    }
    slideIndex++;
    if (slideIndex> slides.length) {slideIndex = 1}    
    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";
    setTimeout(showSlides, 2000); // Change image every 2 seconds
}
</script>
 
</body>
</html>

je viens de le tester mais il manque le côté aléatoire du nombre d'image dans le dossier et je crois qu'il faut utiliser le php pour ça, mais je sais pas du tout comment faire.

Diaporama en php

EDI, CMS, Outils, Scripts et API PHP

Vue hybride

Discussions similaires

Partager

Partager