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

I would do this as a server-side solution.

It would be easy enough to create an object (or a struct) with a timestamp in the Application scope. When you load the page, compare the timestamp with the current time.

If it's less than 24 hours (or whatever your limit is) just use the information in the application scoped object.

If it's more than 24 hours, run the process to choose an image and caption, load it into your object, and recent the timestamp to the current time.

Answer 2

script can download different images depend on the day. for example in 123 day of year script download 123%50 --> 23.jpg image

document.getElementById("image_id").src = parseInt(currentTime.getTime()/(1000*60*60*24))%50+".jpg";

image will change each day, not randomly, but i think this solutoun is sufficient

Answer 3

Give this a go (Requires Application Scope), put it inside the onRequestStart method of APPLICATION.cfc

<cfscript>
    if( NOT structKeyExists(APPLICATION, 'homePageImage') ) {
        APPLICATION.homePageImage = structNew();
    }
    if( 
        NOT structKeyExists( APPLICATION.homePageImage, 'imageDate' )  
        OR NOT structKeyExists( APPLICATION.homePageImage, 'imageSrc')
        OR NOT isDate( APPLICATION.homePageImage.imageDate )
        OR DateDiff( "h", NOW(), APPLICATION.homePageImage.imageDate ) GT 1
    ) {
        APPLICATION.homePageImage.imageSrc = APPLICATION.Utils.getRandomImage( "/images/captions" );
        APPLICATION.homePageImage.imageDate = NOW();
    }
</cfscript>

Next you need to define the function getRandomImage somewhere (something like Utils.cfc and then store it in Application.Utils for reusability)

<cffunction name="getRandomImage" returntype="string" access="public" output="false">
    <cfargument name="directory" required="true" hint="this is the directory to select a random image from" />
    <!--- Always define a local struct to keep your variable under control --->
    <cfset var LOCAL = structNew() /> 

    <cfif NOT directoryExists( expandPath( ARGUMENTS.directory ) )>
        <cfthrow message="Directory #arguments.directory# does not exist." />
    </cfif>

    <cfdirectory action="list" name="LOCAL.imageList" type="file" directory="#expandPath( ARGUMENTS.directory )#" />
    <!--- the ceiling part will stop you from getting 0 --->
    <cfset LOCAL.targetFile = Ceiling( randRange(0, LOCAL.imageList.recordCount) ) /> 

    <cfset LOCAL.targetFileName = ARGUMENTS.directory & "/" & LOCAL.imageList.name[ LOCAL.targetFile ] />

    <cfreturn LOCAL.targetFileName />
</cffunction>

And finally, on your page

<cfoutput>
    <img src="#APPLICATION.homePageImage.ImageSrc#" />
</cfoutput>

Answer 4

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.