Thursday, September 24, 2009

Random Image by Date

A newer version of this plugin is now available!

The following script will show a random image depending on the date.

The frame below contains this script... you can view it directly by clicking this link. You can view the page source from there.

The set up is fairly simple. The page requires two things to work:
  1. jQuery installed (you can use Google's copy as seen in the page source)
  2. An <img> anywhere on your page with an ID of "todaysimage", if it doesn't exist, it will append it to the body.
Then you'll need to set up your image arrays as follows:
  1. In the javascript, add the template below.

    images.push (["DATES","IMAGE URL"]);

    DATES = The date range to display the image.
    IMAGE URL = Full path to your image.
  2. The DATES must follow this format:

    0 Set image as a default (will only display if no date specific images are found).
    1/1 Dispaly image only on Jan 1st.
    1/1 - 1/5 Dispaly image from Jan 1st to Jan 5th (spaces are okay).
    7/20 - 8/20
    Display image from June 20th to August 20th.
    1/3rdMon Display image only on the 3rd Monday of Janurary.
    5/lastMon Display image only on the last Monday of May.
    11/3rdThur-11/4thThur Display image from the 3rd Thursday of Nov to the 4th Thursday of Nov.
    Display image from Dec 20th to the 1st Sunday of Janurary.


    • The dates that cross months (7/20-8/20) will display along with date specific images (added to the randomization).
    • Use slashes "/" to separate the month and day and dashes "-" to set a range (e.g., using 1-1 to 1-5 will break the script)
    • Using the last weekday (lastMon) of the month in the date has one restriction at this time... it'll only works for 30 day months for now. I may fix this in future versions.
    • When using the text in the date (e.g. 1st, 2nd, 3rd, last) don't spell these fully out ( first, second, third) as the script is looking for the number.
    • The weekday in the date must have at least 3 letters - these are okay: (Mon or Monday); these are not okay (M or Mo).
  • If you are noticing that one image isn't showing up or something just doesn't work right, you can try to trouble shoot the problem.
  • Look for the following lines in the script below the "Don't change anything below this line"

    var debug = false; /* for debugging purposes */
    var thismonth = (debug) ? 11 : date.getMonth() + 1;
    var thisday = (debug) ? 20 : date.getDate();
    var thisyear = (debug) ? 2009 : date.getFullYear();

    • Set the debug variable to "true" and then adjust the date (in blue) to manually adjust the date.
    • Run the script and you can see what the script gets for results from your variables.
    • The display will show images found for the current month (thismonth variable) and show the date it derived as well as if it's within the date range.

  • Additionally, you can access the debug mode from the address bar simply by adding the following (in blue) to the end:

    • #debug - actives the debug mode
    • 12/31/2009 - sets the date you want to check (month/day/year)

    To prevent debug from working once you are done with your script, simply set the locked variable in the script to true:

    /* locks out debug mode from the URL*/
    var locked = true;
  • Sample debug output:

    Date used: 11/20/2009
    (11/11), derived range: 11-11 is NOT in range; image = veterans1.jpg
    (11/11), derived range: 11-11 is NOT in range; image = veterans2.jpg
    (11/11), derived range: 11-11 is NOT in range; image = veterans3.jpg
    (11/3rdThur-11/4thThur), derived range: 19-26 is in range; image = thanksgiving1.jpg
    (11/3rdThur-11/4thThur), derived range: 19-26 is in range; image = thanksgiving2.jpg
    (11/3rdThur-11/4thThur), derived range: 19-26 is in range; image = thanksgiving3.jpg
    (11/3rdThur-11/4thThur), derived range: 19-26 is in range; image = thanksgiving4.jpg

    # of currentImages = 4
    current random image = thanksgiving4.jpg

  • Try out these links to see the debug mode in action (my example script isn't locked):

    1. #debug:1.1.2010
    2. #debug:10/31/2009
    3. #debug - This will default to todays date, but edit mode is active


  1. I've turned this into a jQuery plugin... I'll post the update soon.

  2. Hi,

    This script is great and is the one I was looking for.

    One question, it is posible that instead of looking for the client computer's date and time, look at the webserver's date and time?


  3. Hi Jose! Javascript is run on client side, but if you are using php on your web server you could set the date and time by injecting it into the script. So in the code, replace the date variable with the date/time as follows:

    var date = new Date(<?php echo date("F j, Y G:i:s") ?>);

    If you want to use a different format, check out this php reference page