How can I change the daily image on a homepage using JavaScript?

Question

I need to change the image along with associated caption randomly every 24 hours on a coldfusion homepage. I have about 50 images and captions and I don't want to do this manually every day. Could you point me to any examples of javascript source code? Thanks.

I also want to be able to enlarge the pic using a lightbox. Can someone tell me how to modify the code to do that?

Answer 1

You really shouldn't do those things on the server-side. If you don't plan on adding images you could just send the current datetime (if you don't trust the client computer time) and leave the rest to javascript.

oImages = [
  {time: '2011-01-01', img: 'path/to/image.ext', caption: "image caption"},
  ... more images ...
];

On page load, you just create the image tag and pass the source based on the server time:

window.onload = function(){
  for(i in oImages){
   if(oImages[i].time == "coldfusion_time") oTodayImage = oImages[i];
  }
  oImg = document.creatElement("img");
  oImg.setAttribute("title", oTodayImage.caption);
  oImg.setAttribute("src", oTodayImage.img);
  document.body.appenChild(oImg);
};

You just need to output the server time instead of the "coldfusion_time" in the if statement, and either hardcode the javascript array objects or output what you need with coldfusion.