Advance slideshow without reloading page

My slideshow script uses the onclick event window.location.reload() to advance to the next mini-slideshow, causing the page to flicker when the “NEXT Plant” button is clicked.

Ideally, the onclick event should trigger a function to advance the slideshow, eliminating the need to reload the page.

Creating such a function, unfortunately, is easier said than done.

Intuitively, my first thought was to forego the onclick event window.location.reload() method and instead have the onclick event call the onLoad function runShow(), thinking that re-invoking this script would advance the slideshow. It didn’t.

Re-invoking other functions also failed to advance the slideshow, and now I’m out of ideas what to try next.

Please advise. Thanks.

body {
  display: flex;
  justify-content: center;
  text-align: center;
  background-color: black;
}

img {
  display: block;
  position: relative;
  top: 20px;
  max-width:100%;
  max-height:calc(100vh - 160px - ((.4em + .6vmin) + (.4em + .6vmax)));
  object-fit: contain;
}

.caption {
  position: absolute;
  bottom: 120px;
  font-size: calc((.4em + .6vmin) + (.4em + .6vmax));
  color: white;
  left: 0;
  right: 0;
  width: 100%;
  text-align: center;
}

p {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  width: 100%;
  text-align: center;
}

.button {
  border-radius: 8px;
  background-color: green;
  border: none;
  color: black;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
}

<!DOCTYPE html>
<html>
<head>

<title>Plant Slideshow</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">

</head>

<body onLoad="runShow()">

<img id="slide" onmouseover="stopShow()" onmouseout="runShow()" src="" alt="">

<script>

var genusSpecies={"Adam's Needle (Yucca filamentosa)":["Adam's Needle (Yucca filamentosa)1.jpg"],"Virginia Wild Rye (Elymus virginicus)":["Virginia Wild Rye (Elymus virginicus)1.jpg","Virginia Wild Rye (Elymus virginicus)2.jpg"]};

if (window.innerHeight > 1000) {
var specificResolution="./plants1220/"; // Higher-resolution photos for desktops 
} else {
var specificResolution="./plants500/"; // Lower-resolution photos for smartphones
}

var curimg=0;

var keys=Object.keys(genusSpecies); // Creates array of keys
var plantNumber=Object.keys(genusSpecies).length;

x=Math.floor(Math.random() * (plantNumber)); // Selects random index number for “keys” array, the element’s value providing a named key for “genusSpecies”

var plant=genusSpecies[keys[x]]; // Value of named key (image file names of specific mini-slideshow)

function swapImage()
{
   document.getElementById("slide").setAttribute("src",specificResolution+plant[curimg])
   curimg=(curimg<plant.length-1)? curimg+1 : 0; timer = setTimeout("swapImage()",4000);
}

function stopShow()
{
   clearTimeout(timer);
}

function runShow()
{
   swapImage();  
}

</script>

<div class="caption">

<script>

document.write(keys[x]); // Displays caption

</script>

</div>

<p><button class="button" onclick="window.location.reload()">NEXT Plant<br>(hover over slideshow to pause)</button></p> 
<!-- Reloads page, advancing the slideshow, but is inefficient & causes flickering -->

</body>
</html>

Solution

Took a bit of doing to learn how it works.. and because of that I just made a function nextSlide that resets JUST the important stuff(you might wanna do something else other than random though) because your other functions do the rest :D

Pure random next slide makes there be several occurrences of the same slide being loaded.. If you want it not like that(eg: sequentially looping through array) just tell me in the comments, but as for now, your code runs without reloading

EDIT: IT WORKS PERFECTLY, WHAT IS GOING WRONG?

https://repl.it/talk/share/Testing/121825 has code forked from your repl(and I applied my below answer to it) and https://slideshow-code-needs-improving--paultaylor2.repl.co/ would let you see the full tab example(it works, and changes the images).. so I ask, what problems are you experiencing?

I did see one thing, that the value specificResolution are 2 different things from when you gave your snippet in your question and the snippet you have in your repl.. so just ensure that specificResolution checks EXISTING FOLDERS

//place this in a script tag SOMEWHERE AT THE BOTTOM LIKE BELOW BODY
var genusSpecies={"Adam's Needle (Yucca filamentosa)":["Adam's Needle (Yucca filamentosa)1.jpg"],"Virginia Wild Rye (Elymus virginicus)":["Virginia Wild Rye (Elymus virginicus)1.jpg","Virginia Wild Rye (Elymus virginicus)2.jpg"]};

/*HELLO, PLEASE MAKE SURE THIS VARIABLE HAS A VALID BEGINNING, since your example in the repl for this variable is DIFFERENT to the example I'm replicating from your question*/
/////////////////////////////////////////////////
if (window.innerHeight > 1000) {
window.specificResolution="./plants1220/"; // Higher-resolution photos for desktops 
} else {
window.specificResolution="./plants500/"; // Lower-resolution photos for smartphones
}
/////////////////////////////////////////////////
var curimg=0;
var keys=Object.keys(genusSpecies); // Creates array of keys
var plantNumber=Object.keys(genusSpecies).length;

var rand=()=>Math.floor(Math.random() * (plantNumber));
var x=rand(); // Selects random index number for “keys” array, the element’s value providing a named key for “genusSpecies”

var plant=genusSpecies[keys[x]]; // Value of named key (image file names of specific mini-slideshow)

function swapImage()
{
   document.getElementById("slide").setAttribute("src",specificResolution+plant[curimg])
   curimg=(curimg<plant.length-1)? curimg+1 : 0; window.timer = setTimeout(swapImage,4000);
}

function stopShow()
{
   clearTimeout(timer);
}

function runShow()
{
   swapImage();  
}
function nextSlide(){ //your other functions do the rest of work :D
  x=rand(); curimg=0;
  stopShow(); runShow();
  plant=genusSpecies[keys[x]];
  document.getElementsByClassName('caption')[0].innerText=(keys[x]);
}
document.getElementsByClassName('caption')[0].innerText=(keys[x]); // Displays caption

body {
  display: flex;
  justify-content: center;
  text-align: center;
  background-color: black;
}

img {
  display: block;
  position: relative;
  top: 20px;
  max-width:100%;
  max-height:calc(100vh - 160px - ((.4em + .6vmin) + (.4em + .6vmax)));
  object-fit: contain;
}

.caption {
  position: absolute;
  bottom: 120px;
  font-size: calc((.4em + .6vmin) + (.4em + .6vmax));
  color: white;
  left: 0;
  right: 0;
  width: 100%;
  text-align: center;
}

p {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  width: 100%;
  text-align: center;
}

.button {
  border-radius: 8px;
  background-color: green;
  border: none;
  color: black;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
}

<!DOCTYPE html>
<html>
<head>

<title>Plant Slideshow</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">

</head>

<body onLoad="runShow()">

<img id="slide" onmouseover="stopShow()" onmouseout="runShow()" src="" alt="">

<div class="caption"></div>

<p><button class="button" onclick="nextSlide()">NEXT Plant<br>(hover over slideshow to pause)</button></p> 
<!-- Reloads page, advancing the slideshow, but is inefficient & causes flickering -->

</body>
</html>