Discussion :

[Casio]

Salutations,

sur un slideshow HTML/JS qui semble bien fonctionner, je cherche à faire en sorte qu'il puise de façon ALEATOIRE dans le container, et non pas les uns après les autres comme actuellement.

Je suis une grosse quiche en JS.

Voici un bout de code actuel :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
<div class="slideshow-container">
	<div class="mySlides fade">
		<img src="../pict/Slide/Slide_BOLEX_Paillard_18_5-1961.jpg" style="width:100%">
		<div class="text">Projecteur BOLEX Paillard 18-5 (8mm) de 1961</div>
	</div>
	<div class="mySlides fade">
		<a href="https://youtu.be/9vxkCvYYS_k" target="_blank" rel="noreferrer">
			<img src="../pict/Slide/Slide_CNJV_BNF-2017.jpg" title="Colloque BNF de 2017" style="width:100%">
		</a>
		<div class="text">Colloque BNF de 2017</div>
	</div>
</div>

Et :

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

Avez-vous une idée de comment m(y prendre ?

Merci de votre aide ...

[SpaceFrog]

le choix de la diapo qui s'affiche se fait à ce niveau là :

Code :

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

1
2
 
slides[slideIndex-1].style.display = "block";

sur l'array slides
Il suffirait de faire un shuffle juste avant...

[Casio]

(...)

sur l'array slides
Il suffirait de faire un shuffle juste avant...

Je ne connais pas Js, quelle est la formule ? shuffle(array) ?
Je ne trouve pas sur le net de tuto.

Il semble qu'il faille définir une fonction Shuffle.

[NoSmoking]

Bonjour,
shuffle = « mélanger » dans la langue de la grenouille de l'espace

[Casio]

On est d'accord.

Mais je ne connais pas la nomenclature.

[NoSmoking]

Mais je ne connais pas la nomenclature.

si tu parles de la liste des images tu peux toujours la faire après chargement.

Il faudrait quand même savoir ce que tu souhaites à savoir faire un slide aléatoire ou mettre les images de façon aléatoire au départ et faire avec ?

[Casio]

Voici la page en question : https://wda-fr.org

J'aimerai que les images se chargent aléatoirement.

[javatwister]

Ce qui est sûr, c'est que tu n'as besoin que d'une image dans ton container...

[Casio]

Certainement.

Quelle est la nomenclature pour ce random ?

[NoSmoking]

J'aimerai que les images se chargent aléatoirement.

je pense que tu veux dire qu'elles s'affichent aléatoirement car on ne maitrise pas l'ordre de chargement des images.

Tu pourrais également le faire côté serveur, je parle du tri, car j'ai vu que cela provenait d'un fichier inclus

Code html :

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

<!-- Partie incluse par le fichier slide.php !-->

Ceci étant, si l'on considère que l'on traite cela côté client, donc en JavaScript on pourrait faire de la sorte.

• Récupérations des éléments concernés, ta nomenclature en fait

Code :

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

1
2
3
// récup. éléments utiles
const slideParent = document.querySelector(".slideshow-container");
const swapChildren = slideParent.querySelectorAll(".mySlides");

• Récupération d'un ordre aléatoire

Code :

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

1
2
// récup. un random d'affichage
const ordreTri = getRandomOrder(swapChildren.length);

... on verra la fonction de « mélange » après

• Changement de l'ordre d'affichage en déplaçant les éléments en fin de conteneur

Code :

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

1
2
3
4
5
6
7
8
9
// change l'ordre d'affichage
// Attention : il faut travailler avec une NodeList statique
// et non une HTMLCollection via getElementsByClassName()
ordreTri.forEach((ind) => {
  // juste pour voir
  swapChildren[ind].classList.add("pos-" + ind);
  // déplacement en fin de l'élément
  slideParent.appendChild(swapChildren[ind]);
});

... voilà qui est fait les éléments sont mélangés, on pourrait faire différemment mais ce serait une autre approche entre NodeList et HTMLCollection.

• Concernant la fonction de récupération d'un ordre aléatoire, j'utilise

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
function getRandomOrder(nbr) {
  const tabResult = [];
  // tableau contenant les numéro des cases
  const tabInitial = [];
  for (let i = 0; i < nbr; i += 1) {
    tabInitial[i] = i;
  }
  //[ES6] const tabInitial = new Array(nbr).fill(0).map((el, ind) => ind);
  // tirage au sort
  let ind;
  for (let i = 0; i < nbr; i += 1) {
    ind = Math.floor(Math.random() * tabInitial.length);
    // sauve la valeur de la colonne
    tabResult.push(tabInitial[ind]);
    // supprime élément pour nouveau tirage unique
    tabInitial.splice(ind, 1);
  }
  return tabResult;
}

... qui m'est suffisante et qui marche bien.

• Parlons de ta fonction d'affichage du slide, celle-ci pourrait être « simplifiée » comme ci dessous :

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
// Attention : il faut récupèrer de nouveau les éléments
// l'ordre de la liste sera différent de la 1st
const slideChildren = slideParent.querySelectorAll(".mySlides");
const dotElements  = document.querySelectorAll(".dot");
// on se place en fin de slide
let slideIndex = slideChildren.length - 1;
// lancement du défilement
showSlides();
 
function showSlides() {
  // on masque
  slideChildren[slideIndex].style.display = "none";
  dotElements[slideIndex].classList.remove("active");
  // on incrémente et limite
  slideIndex += 1;
  slideIndex %= slideChildren.length;
  // on affiche
  slideChildren[slideIndex].style.display = "block";
  dotElements[slideIndex].classList.add("active");
  // on relance
  setTimeout(showSlides, 2000);
}

En mettant bout à bout ces codes cela devrait être fonctionnel.

Code complet :

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
function getRandomOrder(nbr) {
  const tabResult = [];
  // tableau contenant les numéro des cases
  const tabInitial = [];
  for (let i = 0; i < nbr; i += 1) {
    tabInitial[i] = i;
  }
  //[ES6] const tabInitial = new Array(nbr).fill(0).map((el, ind) => ind);
  // tirage au sort
  let ind;
  for (let i = 0; i < nbr; i += 1) {
    ind = Math.floor(Math.random() * tabInitial.length);
    // sauve la valeur de la colonne
    tabResult.push(tabInitial[ind]);
    // supprime élément pour nouveau tirage unique
    tabInitial.splice(ind, 1);
  }
  return tabResult;
}
// récup. éléments utiles
const slideParent = document.querySelector(".slideshow-container");
const swapChildren = slideParent.querySelectorAll(".mySlides");
 
// récup. un random d'affichage
const ordreTri = getRandomOrder(swapChildren.length);
// change l'ordre d'affichage
// Attention : il faut travailler avec une NodeList statique
// et non une HTMLCollection via getElementsByClassName()
ordreTri.forEach((ind) => {
  // juste pour voir
  swapChildren[ind].classList.add("pos-" + ind);
  // déplacement en fin de l'élément
  slideParent.appendChild(swapChildren[ind]);
});
// Attention : il faut récupèrer de nouveau les éléments
// l'ordre de la liste sera différent de la 1st
const slideChildren = slideParent.querySelectorAll(".mySlides");
const dotElements  = document.querySelectorAll(".dot");
// on se place en fin de slide
let slideIndex = slideChildren.length - 1;
// lancement du défilement
showSlides();
 
function showSlides() {
  // on masque
  slideChildren[slideIndex].style.display = "none";
  dotElements[slideIndex].classList.remove("active");
  // on incrémente et limite
  slideIndex += 1;
  slideIndex %= slideChildren.length;
  // on affiche
  slideChildren[slideIndex].style.display = "block";
  dotElements[slideIndex].classList.add("active");
  // on relance
  setTimeout(showSlides, 2000);
}

... ne pas hésiter à lire les commentaires

Remarques générales :

• Le slide étant continu setTimeout pourrait être remplacé par un setInterval.

• La structure HTML pourrait avantageusement devenir par exemple :

Code html :

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

1
2
3
4
<figure class="mySlides fade">
  <img src="../pict/Slide/Slide_Bull-D-2009.jpg" title="Carte BULL-D des annees 1970">
  <figcaption class="text">Carte BULL-D des ann&eacute;es 1970</figcaption>
</figure>

• La classe fade ne peut pas être animée, la propriété display n'est pas candidate au transition.

• Le diaporama pourrait être fait en CSS, voir : Diaporama avec effet fade in/out, (auto pub)

Voilà bon dimanche

[Casio]

(...)
Code complet :
(...)

NICKEL, ce la fonctionne très bien : https://wda-fr.org
MERCI

(...)
Remarques générales :

• Le slide étant continu setTimeout pourrait être remplacé par un setInterval.

Par contre,

Code :

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

1
2
3
(...)
  // on relance
  setInterval(showSlides, 2000);

Donne un truc saccadé et moche.

Pour :

• La structure HTML pourrait avantageusement devenir par exemple :

Code html :

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

1
2
3
4
<figure class="mySlides fade">
  <img src="../pict/Slide/Slide_Bull-D-2009.jpg" title="Carte BULL-D des annees 1970">
  <figcaption class="text">Carte BULL-D des ann&eacute;es 1970</figcaption>
</figure>

Je l'intègre comment ?

[NoSmoking]

• Lorsque l'on utilise setInterval, on ne relance pas on fait appel une seule fois à setInterval, cela donne :

Code :

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

1
2
3
4
5
6
// on se place en fin de slide
let slideIndex = slideChildren.length - 1;
// lancement du défilement
setInterval(showSlides, 2000);
// pour affichage immédiat
showSlides();

... et dans la fonction showSlides on supprime le setTimeout qui devient inutile :

Code :

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

1
2
// on relance
//  setTimeout(showSlides, 2000);

• Pour l'intégration, il suffit de remplacer le nom des balises ce qui donne, sauf erreur :

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
<div class="slideshow-container">
  <figure class="mySlides fade">
    <img src="../pict/Slide/Slide_CNJV_BNF-2017.jpg" title="Colloque BNF de 2017">
    <figcaption class="text">Colloque BNF de 2017</figcaption>
  </figure>
  <figure class="mySlides fade">
    <img src="../pict/Slide/Slide_HP_85-2007.jpg" title="Petit ordinateur du bureau HP 85 de 1980">
    <figcaption class="text">Petit ordinateur du bureau HP 85 de 1980</figcaption>
  </figure>
  <figure class="mySlides fade">
    <img src="../pict/Slide/Slide_Bi-Bop_Silverlink_2000-2007.jpg" title="Bi-Bop Silverlink 2000 de 1991">
    <figcaption class="text">Bi-Bop Silverlink 2000 de 1991</figcaption>
  </figure>
  <figure class="mySlides fade">
    <img src="../pict/Slide/Slide_Zenith_Z89-2017.jpg" title="Ordinateur personnel Zenith Z-89 de 1979">
    <figcaption class="text">Ordinateur personnel Zenith Z-89 de 1979</figcaption>
  </figure>
  <figure class="mySlides fade">
    <img src="../pict/Slide/Slide_tore_ferrite.jpg" title="Tore de ferrite des annees 1970">
    <figcaption class="text">Tore de ferrite des ann&eacute;es 1970</figcaption>
  </figure>
  <figure class="mySlides fade">
    <img src="../pict/Slide/Slide_Atari_Falcon_030-2007.jpg" title="Ordinateur personnel Atari Falcon 030 de 1992">
    <figcaption class="text">Ordinateur personnel Atari Falcon 030 de 1992</figcaption>
  </figure>
  <figure class="mySlides fade">
    <img src="../pict/Slide/Slide_Jouques-2020.jpg" title="Atelier PACA de la WDA en 2020">
    <figcaption class="text">Atelier PACA de la WDA en 2020</figcaption>
  </figure>
  <figure class="mySlides fade">
    <img src="../pict/Slide/Slide_Bull-D-2009.jpg" title="Carte BULL-D des annees 1970">
    <figcaption class="text">Carte BULL-D des ann&eacute;es 1970</figcaption>
  </figure>
  <figure class="mySlides fade">
    <img src="../pict/Slide/Slide_IBM_5150-2007.jpg" title="Ordinateur personnel IBM PC 5150 de 1981">
    <figcaption class="text">Ordinateur personnel IBM PC 5150 de 1981</figcaption>
  </figure>
</div>

... dans ce cas il ne faut pas oublier de mettre à jour un minimum le CSS avec l'ajout de :

Code css :

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

1
2
3
4
5
6
.mySlides {
  margin: 0;          /* reset */
}
.mySlides img {
  max-width: 100%;    /* pas de style inline */
}