Advance slideshow without reloading page

Question

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>

What erros do you see on console? I've created a [minimal example](https://jsfiddle.net/Gunterberg/8u01jL7s/1/) of what you're trying to achieve if that helps. — Gunther, Feb 12 '21 at 21:00
I don't see any reason to reload the page in order to do anything. `document.write` is not [good practice](https://stackoverflow.com/questions/4537963/what-are-alternatives-to-document-write) and should be avoided. Can you make an runnable version on stackblitz or jsfiddle to get a better idea of your approach? — Phix, Feb 12 '21 at 22:13
Phix— I’m unfamiliar with those sites, and to post a runnable version of my script there would likely be a learning experience requiring much time. Regarding `document.write` — yes, I know it’s not good practice, but it’s simple... and it works. — Jeff, Feb 12 '21 at 22:26
Okay... the code snippet is working now, minus the photos, which is okay for demonstration purposes. However, clicking on the "Next Plant" button produces a blank page rather than advancing the slideshow (caption should change upon button click). This is because the code snippet fails to reload my script upon clicking the button--- a limitation of stackoverflow's code snippet, not my code. — Jeff, Feb 13 '21 at 14:07
Still no ideas how to advance my slideshow without reloading the page? — Jeff, Feb 13 '21 at 19:30
Click on the blue "Run code snippet" button multiple times to observe how my script relies on reloading the page to advance the slideshow, the photo caption advancing upon reloading from "Adam's Needle" to "Virginia Wild Rye." Also, notice the flicker upon reloading. Again, my goal is to advance the slideshow without reloading. — Jeff, Feb 13 '21 at 23:06
"We're sorry... There are an unusual number of requests coming from this IP address." --- Evidently clicking the blue "Run code snippet" button multiple times locks people out!!! — Jeff, Feb 13 '21 at 23:13
btw, the images i bet are something that only when you run it on ur file or whatever, it'll run.. BUT try my answer to wherever you have the main copy and see if it loads the slides correctly — The Bomb Squad, Feb 13 '21 at 23:15
from the console's list of failed get requests, it seems to be trying to load the correct images each time i click next slide :D — The Bomb Squad, Feb 13 '21 at 23:17
@Jeff it works and I showed a repl for it now. remember to pls mark if im correct :D — The Bomb Squad, Feb 14 '21 at 17:56

The Bomb Squad · Accepted Answer · 2021-02-14T17:51:15.760

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>

The Bomb Squad--- Wow!!! I can't thank you enough for making my code run without reloading!!!!! And, you're right, using `random` cause photos to repeat, but that's okay because my key/value array will be populated with several thousand image file names. Again, thank you!!! — Jeff, Feb 13 '21 at 23:26
but still, an image CAN repeat.. and lol u make me feel like a hero xD — The Bomb Squad, Feb 13 '21 at 23:27
Bad news... my enthusiasm was premature. Unfortunately, your revision advances ONLY the captions, not the slideshow photos themselves. Too bad the "Run code snippet" can't display external resources such as images. If it could, troubleshooting my code would be much easier. ☹️☹️☹️ — Jeff, Feb 14 '21 at 10:44
What is a “repl”? At this point, I’ll try anything to get the code working. — Jeff, Feb 14 '21 at 12:38
@Jeff https://repl.it allows you to use a remote computer setup and run code(you can upload/create files) and run.. it's perfect for testing out the problems ur facing — The Bomb Squad, Feb 14 '21 at 12:42
just when you make the repl, make sure to `share`, copy the share link, and send :D — The Bomb Squad, Feb 14 '21 at 12:43
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/228695/discussion-between-the-bomb-squad-and-jeff). — The Bomb Squad, Feb 14 '21 at 12:52
@Jeff bruh it works smoothly, what was the problem?? If anything, u gotta make sure `specificResolution` points to an existing folder(because IT WORKS) — The Bomb Squad, Feb 14 '21 at 17:55
The Bomb Squad--- I agree, the slideshow is now advancing without the need to reload the page. However, the photos don't match the captions. I'm reviewing your revisions now to determine the issue. — Jeff, Feb 14 '21 at 18:14
Looks like the captions are out of sync with the photos, the caption displayed belonging to the following photo. I'm troubleshooting now. Thanks for all your help! — Jeff, Feb 14 '21 at 18:24
The Bomb Squad--- After changing the order of the code inside the curly brackets of `function nextSlide() {...}`, everything works!!! Thank you so much for offering your expertise!!!!! — Jeff, Feb 14 '21 at 19:21
@Jeff oh im not an expert.. just a random teen.. ur welcome.. and could u pls mark? :D — The Bomb Squad, Feb 14 '21 at 19:34
Drum roll... Here's the link to my slideshow script that now works as intended thanks to "just a random teen": https://repl.it/@jmanc/Slideshow-script — Jeff, Feb 14 '21 at 20:46

Advance slideshow without reloading page

1 Answers1