Script to replace an image (.jpg) daily with another image?

Question

I have a Visual Studio 2005 site which has been up a running for a while. I have an image (.JPG) on this site that I think I need to apply some JavaScript to or something?

Essentially I have 25 images for the month of December and instead of going into the site daily to change this image to another one I was hoping to be able to complete this by code automatically.

I have some .NET skills but I think that I might needs to use JavaScript to complete this task. Can anyone point me in the right direction or provide me with some sample code that could help?

Answer 1

I think the simplest way would be to rename all images to things like "December1.jpg", "December2.jpg", "December3.jpg" etc. Then server-side you would have this:

<img src="/path/to/images/December<%=DateTime.Now.Day%>.jpg"/>

This would just add the day of the month to your image name. There are fancier ways to do it, but for a one-time-deal, you can't get much simpler than this.

EDIT: You might also throw in an "if exists" for your images so that on the 26th you don't end up with a 404 image. Something like this:

Change your image to add an id and default it to hidden:

<img id="dayImage" runat="server" Visibility="false" src="/path/to/images/December<%=DateTime.Now.Day%>.jpg"/>

Then on the code behind:

if (File.Exists(@"C:\path\to\images\December" + DateTime.Now.Day + ".jpg"))
{
    //this will show the image if it exists on the disk
    dayImage.Visibility = true;
}

For more on that go here: http://www.dotnetperls.com/file-exists

Answer 2

The way that I would do it, is to use server-side code, but I think it'll be simpler for everyone to show a JavaScript example. While there are several approaches one might take to accomplish what you're asking, one simple way to do this would be to store the urls to all of the image files as strings in an array, as such:

var urlPath = new Array();

urlPath[0] = "Leave Empty"; //Because there will never be a 0th day of any month...
urlPath[1] = "/Images/nameOfPic1.jpg";
urlPath[2] = "/Images/nameOfPic2.jpg";
urlPath[3] = "/Images/nameOfPic3.jpg";

Then cycle through them by grabbing the date:

var myDate = new Date();

Then get the path to the image based off of getDate():

var currentDate = myDate.getDate();
document.getElementById("imgElement").src=urlPath[currentDate];

Then (depending on how many pics you have for a given month) you can assign a new picture based on the numerical date. Of course, it would, using this example, make sense, to have an amount of pictures equal to the maximum days in a month (31) in order to call them as needed. This way will leave out certain pictures on certain months (months with less than 31 days, however). If you desire to simply cycle through them then do exactly as above, but add this instead of the last two statements (this example assumes you always have 25 pictures):

var currentDate = myDate.getDate();
if(currentDate > 25)
{
    currentDate -= 25;
    document.getElementById("imgElement").src=urlPath[currentDate];
}
else
{
    document.getElementById("imgElement").src=urlPath[currentDate];
}

This isn't totally perfect, as the start of each new month will start the picture list over again, and some pics will be seen more than others. I'm not sure if there is a better way to do this or not, but it should get the job done if your clients aren't too picky. Again, though, I, personally, would use server-side code and set an application variable that is global (for everyone) and would handle this directly and remember the AppState variable (is it clear that I use WebMatrix (C#) yet?) regardless of client-side circumstances.

I hope this helps :)