I have this website where when you refresh it will bring up a random image from a JS array, here's the code
<html>
<head>
<title>Refresh for image!</title>
</head>
<body>
<script type="text/javascript">
<!--
var imlocation = "images/";
var currentdate = 0;
var image_number = 0;
function ImageArray (n) {
this.length = n;
for (var i =1; i <= n; i++) {
this[i] = ' '
}
}
image = new ImageArray(13)
image[0] = '1.jpg'
image[1] = '2.jpg'
image[2] = '3.jpg'
image[3] = '4.jpg'
image[4] = '5.jpg'
image[5] = '6.jpg'
image[6] = '7.jpg'
image[7] = '8.jpg'
image[8] = '9.jpg'
image[9] = '10.jpg'
image[10] = '11.jpg'
image[11] = '12.jpg'
image[12] = '13.jpg'
image[13] = '14.jpg'
image[14] = '15.jpg'
image[15] = '16.jpg'
image[16] = '17.jpg'
image[17] = '18.jpg'
image[18] = '19.jpg'
var rand = 60/image.length
function randomimage() {
currentdate = new Date()
image_number = currentdate.getSeconds()
image_number = Math.floor(image_number/rand)
return(image[image_number])
}
document.write("<img src='" + imlocation + randomimage()+ "'>");
//-->
</script>
</body>
</html>
I've been looking at different ways to make the code alot less clunky and more uniform. I want to be able to just dump .png, .jpg and .gif files into the folder without me having to manipulate the code each time to add the new image in an array. I also found that despite being random I get the same image alot on each refresh, think this is based on the method I used to randomise the image.
Can anyone help with the idea of dumping the files inside a folder and letting the code do the work rather than an array and could anyone please help me with the randomising of each image.
I have this website where when you refresh it will bring up a random image from a JS array, here's the code
<html>
<head>
<title>Refresh for image!</title>
</head>
<body>
<script type="text/javascript">
<!--
var imlocation = "images/";
var currentdate = 0;
var image_number = 0;
function ImageArray (n) {
this.length = n;
for (var i =1; i <= n; i++) {
this[i] = ' '
}
}
image = new ImageArray(13)
image[0] = '1.jpg'
image[1] = '2.jpg'
image[2] = '3.jpg'
image[3] = '4.jpg'
image[4] = '5.jpg'
image[5] = '6.jpg'
image[6] = '7.jpg'
image[7] = '8.jpg'
image[8] = '9.jpg'
image[9] = '10.jpg'
image[10] = '11.jpg'
image[11] = '12.jpg'
image[12] = '13.jpg'
image[13] = '14.jpg'
image[14] = '15.jpg'
image[15] = '16.jpg'
image[16] = '17.jpg'
image[17] = '18.jpg'
image[18] = '19.jpg'
var rand = 60/image.length
function randomimage() {
currentdate = new Date()
image_number = currentdate.getSeconds()
image_number = Math.floor(image_number/rand)
return(image[image_number])
}
document.write("<img src='" + imlocation + randomimage()+ "'>");
//-->
</script>
</body>
</html>
I've been looking at different ways to make the code alot less clunky and more uniform. I want to be able to just dump .png, .jpg and .gif files into the folder without me having to manipulate the code each time to add the new image in an array. I also found that despite being random I get the same image alot on each refresh, think this is based on the method I used to randomise the image.
Can anyone help with the idea of dumping the files inside a folder and letting the code do the work rather than an array and could anyone please help me with the randomising of each image.
Share Improve this question edited Sep 12, 2022 at 9:13 Dharman♦ 33.5k27 gold badges101 silver badges148 bronze badges asked Apr 25, 2018 at 3:25 RhigoRhigo 311 gold badge1 silver badge4 bronze badges 2-
You should either set up an endpoint that can look through the image folder and respond to a request with an array of available images, or serve the page through such an endpoint such that the images are in the HTML already (such as through an
application/jsonscript tag). – CertainPerformance Commented Apr 25, 2018 at 3:32 - Client script are not capable enough to get the entire list of images residing on server, although script can test it out whether images with given name exists/is accessible or not. – user2575725 Commented Apr 25, 2018 at 3:39
2 Answers
Reset to default 4You're pretty much there. Instead of setting image names in your JS, just give them numeric names when you save them to your folder. Then your javascript could look like this:
function getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min)) + min; // The maximum is exclusive and the minimum is inclusive
}
document.write('<img src="images/' + getRandomInt(1, 20) + '.jpg">')
Hello I have a simple trick for this
<head>
<script src="https://ajax.googleapis./ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<div id="banner-images"> </div>
<script>
var images = ['abc.png', 'xyz.png', 'tyt.png', 'utr1.png', 'popup.png', 'psk.png'];
$('<img class="fade-in" src="images/' + images[Math.floor(Math.random() * images.length)] + '">').appendTo('#banner-images');
</script>