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.
Setup

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:
   
   

   Dates	Description
   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.
   12/20-1/1stSun	Display image from Dec 20th to the 1st Sunday of Janurary.

   
   IMPORTANT NOTES:
   
   
   • 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).

Troubleshooting

• 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:
  
  http://myurl.com/randomImage.htm#debug:12/31/2009
  
  
  • #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