https://csmlab.org/assets/js/showImage.js

1/* This script provides the functionalty to display a set of images and
2   animations starting randomly from one of the images
3
4   step :  should be set zero; it is used by the recursive function
5
6   *A   : function and variable for the first box (analysis)
7   *G   : function and variable for the second box (geometry)
8   *D   : function and variable for the third box (data)
9
10*/
11
12// global variables
13var slideIndexA;
14var slideIndexG;
15var slideIndexD;
16
17const pauseBetweenImages = 5000; // time interval for image change
18
19// function for the first box (analysis)
20function showSlidesA(step) {
21  var slides = document.getElementsByClassName("aimage");
22  var i;
23  for (i = 0; i < slides.length; i++) {
24    slides[i].style.display = "none";
25  }
26
27  if (step == 0) {
28    slideIndexA = Math.floor(Math.random() * slides.length);
29  } else {
30    slideIndexA++;
31  }
32
33  if (slideIndexA >= slides.length) {
34    slideIndexA = 0
35  }
36
37//  console.log("aimage, step= " + step + " slideIndex= " + slideIndexA + " slides.length= " + slides.length);
38
39  slides[slideIndexA].style.display = "block";
40
41  const newStep = step + 1;
42
43  setTimeout(function() {
44    showSlidesA(newStep);
45  }, pauseBetweenImages);
46}
47
48
49// function for the second box (geometry)
50function showSlidesG(step) {
51  var slides = document.getElementsByClassName("gimage");
52  var i;
53  for (i = 0; i < slides.length; i++) {
54    slides[i].style.display = "none";
55  }
56
57  if (step == 0) {
58    slideIndexG = Math.floor(Math.random() * slides.length);
59  } else {
60    slideIndexG++;
61  }
62
63  if (slideIndexG >= slides.length) {
64    slideIndexG = 0
65  }
66
67  console.log("aimage, step= " + step + " slideIndex= " + slideIndexG + " slides.length= " + slides.length);
68
69  slides[slideIndexG].style.display = "block";
70
71  const newStep = step + 1;
72
73  setTimeout(function() {
74    showSlidesG(newStep);
75  }, pauseBetweenImages);
76}
77
78
79// function for the third box (data)
80function showSlidesD(step) {
81  var slides = document.getElementsByClassName("dimage");
82  var i;
83  for (i = 0; i < slides.length; i++) {
84    slides[i].style.display = "none";
85  }
86
87  if (step == 0) {
88    slideIndexD = Math.floor(Math.random() * slides.length);
89  } else {
90    slideIndexD++;
91  }
92
93  if (slideIndexD >= slides.length) {
94    slideIndexD = 0
95  }
96
97  console.log("aimage, step= " + step + " slideIndex= " + slideIndexD + " slides.length= " + slides.length);
98
99  slides[slideIndexD].style.display = "block";
100
101  const newStep = step + 1;
102
103  setTimeout(function() {
104    showSlidesD(newStep);
105  }, pauseBetweenImages); 
106}