I would like to build a very simple webpage slide show showing a new photo every few seconds using HTML, CSS and Javascript. I managed to get it running locally on my Linux box with Firefox but as soon as I run the show via my Linux Apache VPS, things break down and the photo image is not updated in Firefox or Chrome although the HTML page gets reloaded as expected. The URL for the image "./slsh.jpg" sits on my Apache server and is actually a randomly though periodically updated symbolic link to one of many photos stored there.
As you see below, I inherited an example code from the web to get the pictures displayed fullsize within the browser window using some CSS tricks within div "a". This setup seems to work fine except that I can’t get that unique "URL + timestamp" approach operational with Javascript. I most likely don’t know how to update that URL string of the background image as I may have screwed up my Javascript lines or the ID reference such as "a".
As soon as I use the Javascript line starting with "document.getElement…" the script seems to just crash, the HTML page is not reloaded anymore, nor is the new image displayed – except when I manually force-reload it with ctrl+shift+r in Chrome for example.
<script>
var timestamp = new Date().getTime();
document.getElementById("a").style.backgroundImage = "url(./slsh.jpg?t=" + timestamp + ")";
window.setInterval('refresh()', 3000);
function refresh() {
location.reload();
</script>
<style>
body, html {
height: 100%;
margin: 0;
}
.bg {
background-image: url('./slsh.jpg');
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
background-color: rgb(10,10,10);
}
</style>
<!DOCTYPE html>
<html>
<head>
<!--- here sits my CSS code --->
<!--- here sits my javascript code --->
</head>
<body id="body">
<div class="bg" id="a"></div>
</body>
</html>
What is wrong here? What needs to adjusted or added in order to make this photo slide show run smoothly? I saw many suggestions on the web – but my particular scenario differs somewhat as I use div with that backgroundImage solution which shows my photos the way I want it.
2
Answers
the solution for the problem is rather simple. i updated the javascript 'refresh' function by taking out the location.reload() line and moving in instead the document.getElement...line :
uff, that's solved...thank you, Thomas, for your comment !
You don’t have to reload the whole html page in order to change the image, in fact you can pre-cache the images if you don’t, leading to a smoother slideshow. Here’s an example.
Note: Change the listOfImageUrls which I’m lazy and auto-generate to your own array of urls to different images.
slideshow.html
slideshow.css
slidehow.js