Ad

Javascript To Change Image

- 1 answer

I have a website and server on which I host hundreds of images of fractals; whenever the mood strikes me, I make more. The files they are saved under are numbered sequentially "00001.jpg", "00002.jpg", etc. How can I change my image every day so that I display a unique image every day?

Thanks

Ad

Answer

Okay, I'm rewriting my answer as I tested it locally (I was interested if it would work). The following will choose a unique image each day from the array, if you add an image you need to add it to the array. You could probably add some code to automatically add all images in the folder into the array instead. To summarize, first we make an array of images, then we find the number of days since an arbitrary date to use as a 0-1 seed (for the day), then we get a random int from this between 0 and the array length - 1, then we change the image source to the array element matching this number.

HTML:

    <img id="sharedimage" src="img/00001.jpg"></img>

JAVASCRIPT (requiring jquery):

$( document ).ready(function() {

var imageArray = [
"img/00001.jpg",
"img/00002.jpg",
"img/00003.jpg"
]

var oneDay = 24*60*60*1000; // hours*minutes*seconds*milliseconds
var firstDate = new Date(2016,00,01);
var secondDate = new Date();
var daySeed = Math.round(Math.abs((firstDate.getTime() - secondDate.getTime())/(oneDay)));

function myRandom(seed) {
 var x = Math.sin(seed++) * 10000;
 return x - Math.floor(x);
}

function getDayBasedRandom (){
 return Math.floor((myRandom(daySeed))*imageArray.length)
}

var randomImage = imageArray[getDayBasedRandom ()]

$('#sharedimage').attr("src", randomImage);

});
Ad
source: stackoverflow.com
Ad