Discussion :

[philippef]

Bonjour,

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

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
<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 HTML :

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

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

[javatwister]

Sans tout regarder, tu as une instruction bizarre à la ligne 8 de ton script (+numero)

[philippef]

Merci.
J'ai enlevé le +, rien de changé

Code :

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

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

[javatwister]

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 css :

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

.hide {display:none}

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

Code html :

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

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 javascript :

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

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)
})

[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

[CosmoKnacki]

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.

[javatwister]

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;

- 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"???

[philippef]

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

voici mon code

Code CSS :

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

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 JavaScript :

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

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 HTML :

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

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 HTML :

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

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="" />

[philippef]

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