Diaporama automatique ne fonctionne pas

Version imprimable

Bonjour,

J'essaie de faire un diaporama automatique.
Les numéros des photos s'affichent dans le formulaire. mais pas les photos.

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
<style type="text/css">
.photosL { width:80%; display:none; border:0.1em solid; box-shadow:3px 3px 3px 3px black; }
.photosH { width:50%; display:none; border:0.1em solid; box-shadow:3px 3px 3px 3px black; }
.photosD { width:50%; border:0.1em solid; box-shadow:3px 3px 3px 3px black; }
/* div des diapo automatique */
#divDiapoAuto { width:100%; text-align:center; background-color:yellow; display:none;}
</style>
 
<script type="text/javascript" >
/* fonction pour diaporama automatique */
speed = 2000;
function afficherauto(){
        var numero = parseInt(document.vueAuto.zonedebut.value);
        var numerofin = parseInt(document.vueAuto.zonefin.value);
        numero = ++numero;
        document.vueAuto.zonedebut.value= numero;
        document.getElementById(+numero).style.display = "inline";
 
        objet_timer = setTimeout('afficherauto()',speed);
 
}
</script>
 
<!---  div pour le diaporama automatique --->
<div id="divDiapoAuto">
	<div>
		<p onclick="stop();" > Arrêter </p>
		<?php
                        include ($_SESSION['langue'].'/rencontres/2019_images.php');
                ?>
	</div>
	<FORM name="vueAuto">
		<INPUT type="text" name="zonedebut" value="0">
		<INPUT type="text" name="zonefin" value="36">
	</FORM>		
</div>

le fichier des images 2019_images.php

Code:

1
2
3
4
5
6
		<img name="diapo" src="images/rencontres/2019/20190426_195654.jpg" class="photosD" id="0" alt="" />
		<img name="diapo" src="images/rencontres/2019/20190426_195738.jpg" class="photosL" id="1" alt="" />
		<img name="diapo" src="images/rencontres/2019/20190426_200442.jpg" class="photosH" id="2" alt="" />
		<img name="diapo" src="images/rencontres/2019/20190426_201047.jpg" class="photosH" id="3" alt="" />
....
		<img name="diapo" src="images/rencontres/2019/20190428_153521.jpg" class="photosH" id="36" alt="" />

J'entre bien dans la fonction car première photo s'affiche et les numéros des photos sont bien incrémentées dans le formulaire !!
Je sais que le problème si situe dans la fonction mais je n'y arrive pas .
Merci d'avance

25/08/2020, 12h32
javatwister

Sans tout regarder, tu as une instruction bizarre à la ligne 8 de ton script (+numero)
25/08/2020, 12h40
philippef
Merci.
J'ai enlevé le +, rien de changé
Code:

1 2 document.getElementById(numero).style.display = "inline";

Plusieurs problèmes, dans la construction de ta page;

- ton formulaire ne sert à rien;
- les id ne peuvent être entièrement numériques;
- le "name" de tes images est inutile;

imagine une class css:

Code:

.hide {display:none}

puis une série d'images insérées dans le contenant approprié:
Code:

1 2 3 4 5 6 7 8 <div id="images"> <img src="im1.jpg" class="hide" alt="1" /> <img src="im2.jpg" class="hide" alt="2" /> <img src="im3.jpg" class="hide" alt="3" /> <img src="im4.jpg" class="hide" alt="4" /> <img src="im8.jpg" class="hide" alt="8" /> <img src="im12.jpg" class="hide" alt="12" /> </div>
Tu peux appeler ton diapo ainsi:
Code:

1 2 3 4 5 6 7 8 9 10 window.addEventListener("DOMContentLoaded",()=>{ let debut=0; const speed = 2000; const diapo=setInterval(()=>{ if(document.querySelectorAll("#images img")[debut]){ document.querySelectorAll("#images img")[debut].classList.remove("hide"); debut++; } else {clearInterval(diapo)}; },speed) })

25/08/2020, 19h24
philippef

Merci pour la réponse.

Ok pour le formulaire
Les id ne peuvent pas être entièrement numérique. Je ne comprends pas pourquoi. Je les utilise dans une diaporama manuel et ça ne pose pas de problème.
J'ai supprimé name="diapo" dans les images

le css que je donnais non seulement cache les images mais en plus je définis un width car certaines photos sont en portrait et les autres en paysage. Est-il plus justicieux de n'afficher que des photos en mode paysage ?

Avant de copier bêtement le code javascript, je suis aller voir son fonctionnement. N'étant pas un "membre avisé" j'avoue que j'ai beaucoup de mal. Il me semblait qu'un code pour un diaporama automatique pouvait être plus simple !!!
Je comprends que le code lance le diaporama au chargement de la page

j'aurais dû spécifier que sur cette même page j'ai 3 choses différentes :
- au chargement de la page des vignettes sur lesquelles ont peut cliquer pour les voir en grand
- un bouton pour afficher un diaporama manuel
- un bouton pour afficher un diaporama automatique. Celui qui me pose problème

J'espère que ces notes sont claires !!
Merci encore
25/08/2020, 22h50
CosmoKnacki

Citation:

Envoyé par philippef

Les id ne peuvent pas être entièrement numérique. Je ne comprends pas pourquoi. Je les utilise dans une diaporama manuel et ça ne pose pas de problème.

Ça dépend. L'attribut id doit obligatoirement commencer par une lettre en HTML4 et ne doit être composé que de lettres (ASCII), chiffres, soulignés, points, deux-points et tirets. Par contre ce n'est plus le cas en html5 où la seule contrainte est qu'il n'y ait pas d'espaces (ou tabulations ou saut de ligne, etc.). Bien entendu, dans les deux cas les ids doivent être uniques.

Mais pour ma part, je m'en tiens toujours pour l'attribut id à la syntaxe HTML4 même en html5; et puis nommer quelque chose en lui attribuant juste un numéro, ce n'est pas très parlant (À noter que la spécification html5 précise explicitement qu'une id n'est pas sensée vouloir dire quoi que ce soit, autrement dit c'est un identifiant unique, point-barre. Il faut bien sûr l'entendre comme un ouverture, pas comme l'obligation de produire des id venues tout droit de l'enfer.)

Ce qu'en dit Mozilla Developper Network qui soulève la question de la compatibilité. Il n'est pas inintéressant de regarder la version anglaise également.
26/08/2020, 09h14
javatwister

Citation:

Envoyé par philippef

le css que je donnais non seulement cache les images mais en plus je définis un width car certaines photos sont en portrait et les autres en paysage. Est-il plus justicieux de n'afficher que des photos en mode paysage ?

Pas de problème avec ta css; garde-là! Mais ajoute celle que je te propose, qui concerne simplement l'affichage ou non de l'image;

Citation:

Envoyé par philippef

- au chargement de la page des vignettes sur lesquelles ont peut cliquer pour les voir en grand
- un bouton pour afficher un diaporama manuel
- un bouton pour afficher un diaporama automatique. Celui qui me pose problème

- Un poil compliqué; surtout que dans le système que tu montres, tu affiches progressivement toutes les images sans cacher les précédentes...;
- Si tu peux cliquer sur une image pour l'agrandir, à quoi peut te servir un "diaporama manuel"???

J'ai repris ce problème de diaporama automatique.
Comme tout m'avait l'air compliqué j'ai cherché et trouvé ce post sur developpez.net https://www.developpez.net/forums/d2...a-automatique/. Tout le code semble fonctionner !!
Mon seul souci, et pas des moindre, toutes les photos sont affichées :oops:

voici mon code

Code:

1
2
3
.photoL { width:80%; border:0.1em solid; box-shadow:3px 3px 3px 3px black; }
.photoH { width:50%; border:0.1em solid; box-shadow:3px 3px 3px 3px black; }
.photoD { width:50%; border:0.1em solid; box-shadow:3px 3px 3px 3px black; }

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var tab= new Array("20190426_195654.jpg","20190426_195738.jpg","20190426_200442.jpg","20190426_201047.jpg");
var i=0;
var chrono = null;
function affiche(){
	document.getElementById("diapo").src="fr/rencontres/2019_images/"+tab[i];
	i++;
	if (i >= 4) i=0; 
}
function start(){
  chrono = setInterval(function(){affiche()},3000);
}
function stop(){
  clearInterval(chrono);
}

Code:

1
2
3
4
5
6
7
8
<div id="divDiapoAuto">
	<div class="divdiapo">
		<p id="stopauto" class="stopauto" onclick="stop();" > Arrêter </p>
		<?php
                        include ($_SESSION['langue'].'/rencontres/2019_images.php');
                ?>
	</div>
</div>

le fichier html des images

Code:

1
2
3
4
<img src="images/rencontres/2019/20190426_195654.jpg" class="photoD" id="diapo" alt="" />
<img src="images/rencontres/2019/20190426_195738.jpg" class="photoL" id="diapo" alt="" />
<img src="images/rencontres/2019/20190426_200442.jpg" class="photoH" id="diapo" alt="" />
<img src="images/rencontres/2019/20190426_201047.jpg" class="photoH" id="diapo" alt="" />

27/08/2020, 17h18
philippef

Avec le lien que j'ai indiqué et que adapté à mon besoin, mon diaporama fonctionne !!