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.

Invité · 13/06/2017, 09h54

Tu as écrit :

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

Quel script ? Montre-le.
Si tu sais DEJA afficher les images, qu'est-ce qui t'empêche de structurer le code HTML pour le diaporama ?

Il suffit de les afficher comme indiqué:

Code html :

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
<div class="mySlides fade">
 
  <img src="001.jpg" alt="" />
 
</div>
<div class="mySlides fade">
 
  <img src="002.jpg" alt="" />
 
</div>
<div class="mySlides fade">
 
  <img src="003.jpg" alt="" />
 
</div>
...

Quant au coté "aléatoire", je ne vois pas ce que tu veux dire.

**kiwki** · 13/06/2017, 11h00

Je me suis mal exprimé, j'ai réussie à afficher le diapo et il marche (ma page web affiche bien un diapo qui défile). Le problème c'est qu'il le fait avec un nombre fini d'image et quand j'en rajoute une dans le dossier il faut la rajouter dans le code, moi je voudrais qu'il cherche lui-même le nombre d'image et leur nom pour que je n'ai pas besoin de le rajouter à chaque fois (les images peuvent changer 2-3 fois par semaine). Pour que j'ai juste à mettre mes images dans le dossier sur le serveur. J'ai vu pour cela qu'il fallait utiliser php avec des tableau et la commande d'ouverture du dossier, le problème c'est que c'est à ce moment que s’arrête mes connaissances.

Merci infiniment pour vos réponses.

**kiwki** · 13/06/2017, 11h07

J'ai trouvé ce code comme exemple à l'adresse: http://www.expreg.com/expreg_article.php?art=diaporama

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<?php
$dos='images';
if ($lister = opendir($dos)) {
   while (false !== ($file = readdir($lister))) {
       if ($file != '.' && $file != '..' && strrchr($file,".")=='.jpg') {
           $diapo[] = $file;
       }
   }
   closedir($lister);
}
usort($diapo, "strnatcmp");
?>

Mais je n'y comprend pas grand chose, ni comment l’insérer dans le code plus haut

Invité · 13/06/2017, 11h26

Voilà un script tout simple :

1/ RECUPERATION des IMAGES dans le DOSSIER

Code php :

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
<?php
// 1/ RECUPERATION des IMAGES dans le DOSSIER
//nom du répertoire contenant les images à afficher
$repertoire = '/images';
$extensions_ok = array('gif','jpg','jpeg','png'); // extensions recherchées : images uniquement
 
//on ouvre le repertoire
$pointeur = opendir($repertoire);
 
//on stocke les noms des fichiers des images trouvées, dans un tableau
$tab_image = array();
while ($fichier = readdir($pointeur))
{      
	if ( in_array( strtolower(pathinfo($fichier,PATHINFO_EXTENSION)), $extensions_ok) )
	{
		$tab_image[] = $fichier;
	}      
}
//on ferme le répertoire
closedir($pointeur);
?>

2/ AFFICHAGE des IMAGES

Code php :

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
<?php
// 2/ AFFICHAGE des IMAGES
if( !empty(($tab_image)) )
{
	// ordre aléatoire
	shuffle($tab_image);
	//affichage des images
	foreach( $tab_image as $image )
	{
?>
   <div class="mySlides fade">
      <img src="<?php echo $repertoire.'/'.$image; ?>" alt="" />
   </div>
<?php
	}
}
?>

N.B. Il faut que le fichier ait l'extension .php

**kiwki** · 13/06/2017, 11h50

J'ai une dernière question et apprêt je vous laisse tranquille

Comment je l'intègre au code du haut, je pense que la partie où on rentre les images va être supprimer ou grandement changer? Ou il faut que je l'intègre juste et c'est fini?
Désolé pour les questions mais j'ai vraiment aucune notions en développent web.

**kiwki** · 13/06/2017, 11h53

A ce que je comprend (dit moi si c'est faux) je n'ai plus besoin du code du haut, le votre suffit ( il cherche les images et les affiches à ce que je comprend).

Invité · 13/06/2017, 12h03

Le script que tu as trouver est loin d'être le meilleur...
On en trouve des responsive, gratuits, en jQuery, faciles à mettre en oeuvre.

Si je prends le 1er qui me tombe sous la main : http://bxslider.com

Exemple :

Code html :

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="http://bxslider.com/lib/jquery.bxslider.js"></script>
<!-- bxSlider CSS file -->
<link href="http://bxslider.com/lib/jquery.bxslider.css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function(){
  $('.bxslider').bxSlider({
          mode: 'fade'
  });
});
</script>
<style type="text/css">
.bxslider-wrap { width:60%; max-width:500px; margin:0 auto; }
</style>
</head>
<body>
 
 
<?php
// 1/ RECUPERATION des IMAGES dans le DOSSIER
//nom du répertoire contenant les images à afficher
$repertoire = './images';
$extensions_ok = array('gif','jpg','jpeg','png'); // extensions recherchées : images uniquement
 
//on ouvre le repertoire
$pointeur = opendir($repertoire);
 
//on stocke les noms des fichiers des images trouvées, dans un tableau
$tab_image = array();
while ($fichier = readdir($pointeur))
{      
        if ( in_array( strtolower(pathinfo($fichier,PATHINFO_EXTENSION)), $extensions_ok) )
        {
                $tab_image[] = $fichier;
        }      
}
//on ferme le répertoire
closedir($pointeur);
?>
 
<div class="bxslider-wrap">
<ul class="bxslider">
<?php
// 2/ AFFICHAGE des IMAGES
if( !empty(($tab_image)) )
{
        // ordre aléatoire
        shuffle($tab_image);
        //affichage des images
        foreach( $tab_image as $image )
        {
?>
   <li>
      <img src="<?php echo $repertoire.'/'.$image; ?>" alt="" />
   </li>
<?php
        }
}
?>
</ul>
</div>
 
 
</body>
</html>

N.B.

//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js : INITIALISATION jQuery (obligatoire)
les fichiers /lib/jquery.bxslider.js et /lib/jquery.bxslider.css peuvent/doivent être téléchargés sur ton propre serveur.

**kiwki** · 13/06/2017, 12h09

Ok je vais tester

il faut juste que j'installe les fichiers sur mon serveur (et que je modifie le chemin d'accès au dossier pour que ca marche)

**kiwki** · 13/06/2017, 15h17

Je viens de le tester il marche très bien, je voudrais apporter une dernière modification comment faire pour qu'il se déroule automatiquement.

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
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="http://bxslider.com/lib/jquery.bxslider.js"></script>
<!-- bxSlider CSS file -->
<link href="http://bxslider.com/lib/jquery.bxslider.css" rel="stylesheet" />
<script type="text/javascript">
        $(document).ready(function(){
        });
$(document).ready(function(){
  $('.bxslider').bxSlider({
          mode: 'fade'
  });
});
</script>
<style type="text/css">
.bxslider-wrap { width:100%; max-width:1296px; margin:0 auto; }
</style>
</head>
<body>
 
 .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;
}
 
<?php
// 1/ RECUPERATION des IMAGES dans le DOSSIER
//nom du répertoire contenant les images à afficher
$repertoire = './Test';
$extensions_ok = array('gif','jpg','jpeg','png'); // extensions recherchées : images uniquement
 
//on ouvre le repertoire
$pointeur = opendir($repertoire);
 
//on stocke les noms des fichiers des images trouvées, dans un tableau
$tab_image = array();
while ($fichier = readdir($pointeur))
{      
        if ( in_array( strtolower(pathinfo($fichier,PATHINFO_EXTENSION)), $extensions_ok) )
        {
                $tab_image[] = $fichier;
        }      
}
//on ferme le répertoire
closedir($pointeur);
?>
 
<div class="bxslider-wrap">
<ul class="bxslider">
<?php
// 2/ AFFICHAGE des IMAGES
 
 
 
if( !empty(($tab_image)) )
{
        // ordre aléatoire
        shuffle($tab_image);
        //affichage des images
        foreach( $tab_image as $image )
        {
?>
   <li>
      <img src="<?php echo $repertoire.'/'.$image; ?>" alt="" />
   </li>
<?php
        }
}
?>
</ul>
</div>
 
 
</body>
</html>

Invité · 13/06/2017, 16h20

Il suffit de LIRE (et éventuellement traduire l'anglais) :

Tu as plein d'exemples sur leur site
Tu peux aussi regarder les options

Pour un départ automatique :

Code jQuery :

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

1
2
3
4
5
6
7
8
<script type="text/javascript">
$(document).ready(function(){
  $('.bxslider').bxSlider({
	auto: true, // départ automatique
	mode: 'fade' // mode de transition ('horizontal', 'vertical', 'fade')
  });
});
</script>

**kiwki** · 14/06/2017, 07h43

Mon diaporama marche

Merci pour ton aide précieuse

Diaporama en php

EDI, CMS, Outils, Scripts et API PHP

Discussions similaires

Partager

Partager