• Let's say you have 4 images that have a Christmas holiday theme.
• You add the image URLs to the script and set the date to only display these images between 12/20 and 12/30.
• The script will figure out what today is and find and group all images that are set to display on this date.
• If today just happened to be 12/22, it will find those 4 images you added.
• If today is 12/19, it won't find any images set to display and will revert to the default images that you set in the script (these will have a date set to zero).
• It will then choose an image to display randomly from that group.

<center><img id="todaysimage" src="" alt=""></center>
<script type="text/javascript">
var images = new Array();

/* Default images (these display if no images are found to display for today) */
images.push (["0","basic1.jpg"]);
images.push (["0","basic2.jpg"]);
images.push (["0","basic3.jpg"]);
images.push (["0","basic4.jpg"]);

/* Jan */
images.push (["1/1-1/5","newyears1.jpg"]);
images.push (["1/1-1/5","newyears2.jpg"]);
images.push (["1/3rdMon","MLK1.jpg"]);
images.push (["1/3rdMon","MLK2.jpg"]);

/* Feb */
images.push (["2/10-2/14","Valentines.jpg"]);
images.push (["2/10-2/14","Valentines2.jpg"]);
images.push (["2/3rdMon","Washington1.jpg"]);
images.push (["2/3rdMon","Washington2.jpg"]);

/* Mar */
images.push (["3/15-3/17","StPats1.jpg"]);
images.push (["3/15-3/17","StPats2.jpg"]);
images.push (["3/15-3/17","StPats3.jpg"]);

/* April */
images.push (["4/1","AprilFools1.jpg"]);
images.push (["4/1","AprilFools2.jpg"]);

/* May */
images.push (["5/5","Cinco1.jpg"]);
images.push (["5/5","Cinco2.jpg"]);
images.push (["5/10","MothersDay1.jpg"]);
images.push (["5/10","MothersDay2.jpg"]);
images.push (["5/lastMon","Memorial1.jpg"]);
images.push (["5/lastMon","Memorial2.jpg"]);

/* Jun */
images.push (["6/3rdSun","FathersDay1.jpg"]);
images.push (["6/3rdSun","FathersDay2.jpg"]);

/* Jul */
images.push (["7/4","independence1.jpg"]);
images.push (["7/4","independence2.jpg"]);
images.push (["7/4","independence3.jpg"]);

/* Aug */
images.push (["7/20-8/20","summerbreak1.jpg"]);
images.push (["7/20-8/20","summerbreak2.jpg"]);
images.push (["7/20-8/20","summerbreak3.jpg"]);
images.push (["7/20-8/20","summerbreak4.jpg"]);

/* Sep */
images.push (["9/1stMon","laborday1.jpg"]);
images.push (["9/1stMon","laborday2.jpg"]);
images.push (["9/1stMon","laborday3.jpg"]);
images.push (["9/1stMon","laborday4.jpg"]);

/* Oct */
images.push (["10/2ndMon","Columbus1.jpg"]);
images.push (["10/2ndMon","Columbus2.jpg"]);
images.push (["10/25-10/31","halloween1.jpg"]);
images.push (["10/25-10/31","halloween2.jpg"]);
images.push (["10/25-10/31","halloween3.jpg"]);
images.push (["10/25-10/31","halloween4.jpg"]);

/* Nov */
images.push (["11/11","veterans1.jpg"]);
images.push (["11/11","veterans2.jpg"]);
images.push (["11/3rdThur-11/4thThur","thanksgiving1.jpg"]);
images.push (["11/3rdThur-11/4thThur","thanksgiving2.jpg"]);
images.push (["11/3rdThur-11/4thThur","thanksgiving3.jpg"]);
images.push (["11/3rdThur-11/4thThur","thanksgiving4.jpg"]);

/* Dec */
images.push (["12/15-12/30","Christmas1.jpg"]);
images.push (["12/15-12/30","Christmas2.jpg"]);
images.push (["12/15-12/30","Christmas3.jpg"]);
images.push (["12/31","Newyearseve1.jpg"]);
images.push (["12/31","Newyearseve2.jpg"]);

// ********************************
// Don't change anything below this line
// ********************************
var currentImages = new Array();
var defaultImages = new Array();
var date = new Date();
/* for debugging purposes */
var debug = false;
var thismonth = (debug) ? 11 : date.getMonth() + 1;
var thisday = (debug) ? 20 : date.getDate();
var thisyear = (debug) ? 2009 : date.getFullYear();
/* locks out debug mode from the URL*/
var locked = false;
/* You can also add #debug:1/1/2009 (month/day/year) to the end of the URL */
var whash = window.location.hash;
if (whash.match('#debug')&&!locked) {
 debug = true;
 tmp = whash.match(/^#debug:(0?[\d]|1[0,1,2])\/([0-9]|[0,1,2][0-9]|3[0,1])\/((19|20)[0-9][0-9])$/);
 if (tmp){
  thismonth = tmp[1];
  thisday = tmp[2];
  thisyear = tmp[3];
 }
}
if (debug) {
 $('body').prepend('<div id="bdebug"></div>');
 $('#bdebug').append("Date used: " + thismonth + "/" + thisday + "/" + thisyear + "<br>");
};
var endsNextYear = false;
var weekdays = (["sun","mon","tue","wed","thu","fri","sat"]);
for (j=0; j<images.length; j++) {
 var datestr = images[j][0].replace(/\s/,'');
 /* example datestr = "1/1-1/10" or "9/1stMon-9/1stWed" */
 var dates = datestr.split('-');
 var tMonthStartStr = parseInt(dates[0].split('/')[0],10);
 var tMonthEndStr = (typeof(dates[1])=="undefined") ? tMonthStartStr : parseInt(dates[1].split('/')[0],10);
 /* if the date range is from 11/10 to 2/5, figure out if we are in range, then just set the month to now */
 if ( (tMonthStartStr > tMonthEndStr) && (thismonth >= tMonthStartStr || thismonth <= tMonthEndStr) ) {
  tMonthStartStr = (tMonthStartStr == thismonth) ? thismonth : thismonth - 1;
  tMonthEndStr = (tMonthEndStr == thismonth) ? thismonth : thismonth + 1;
  endsNextYear = true;
 } else {
  endsNextYear = false;
 }
 if ( tMonthStartStr <= thismonth && tMonthEndStr >= thismonth ) {
  var beg = extractDay( (dates[0]).split('/')[1] );
  /* if end date is undefined, set it to beginning date */
  var tmp = (endsNextYear) ? thisyear + 1 : thisyear;
  var end = (typeof(dates[1])=="undefined") ? beg : extractDay( (dates[1]).split('/')[1] );
  /* set day for 1st of this month, if start date was prior to this month */
  if ( tMonthStartStr < thismonth ) { beg = 1 };
  /* set day for end of this month, if end date is after this month (using 31 - it needs to be > the last day of the month for calculation) */
  if ( tMonthEndStr > thismonth ) { end = 31 };
  if (debug) {
   $('#bdebug').append("(" + images[j][0] + "), derived range: " + thismonth + "/" + beg + "-" + thismonth + "/"  + end + " ");
  }
  if ( thisday >= beg && thisday <= end ) {
   if (debug) {
    $('#bdebug').append("<span style='color:#080'>is in range</span>; image = " + images[j][1] + "<br>");
   }
   currentImages.push( images[j] );
  } else {
   if (debug) {
    $('#bdebug').append("is <span style='color:#f00'>NOT in range</span>; image = " + images[j][1] + "<br>");
   }
  }
 }
 /* Save default images if no special matches are found */
 if ( parseInt(images[j][0].split('/')[0],10) == 0 ) {
  defaultImages.push( images[j] );
 }
}
if (currentImages.length==0) {
 currentImages = defaultImages;
 if (debug) {
  $('#bdebug').append("<br><span style='color:#080'>No matches found for date range, using default Images!</span>");
 }
}
var inc = Math.floor( Math.random() * currentImages.length );
if (debug) {
 $('#bdebug').append("<br># of currentImages = " + currentImages.length + "<br>current random image = " + currentImages[inc][1]);
 $('#bdebug').append('<br><input type="button" value="Show All Images" onclick="checkAll()">');
}
var imgloc = ( $('#todaysimage').length ) ? '#todaysimage': '.BannerArea img';
$(imgloc).attr('src',currentImages[inc][1]);

function extractDay(tDayStr){
 /* input: target day ("1stMon" or "10"), output: day of month */
 if (!tDayStr.match('st|nd|rd|th|last')) {
  return parseInt(tDayStr,10);
 }
 var checkMonth = false;
 if (tDayStr.match('last')) {
  /* set "last" to "4th" weekday of the month, then try to add a week later */
  tDayStr = '4th' + tDayStr.substring(4,tDayStr.length);
  checkMonth = true;
 }
 /* extract out weekday text (e.g. Mon) */
 var tWeekdayStr = tDayStr.substring(3,6).toLowerCase();
 /* extract out N from date (e.g. 1 from 1st, or 2 from 2nd) */
 var tNthDay = parseInt(tDayStr.substring(0,1),10);
 var tWeekday = 0;
 for (k=0;k<weekdays.length;k++) {
  if (weekdays[k]==tWeekdayStr) { tWeekday = k; }
 }
 /* get day of the week at the beginning of the month (e.g. 9/1/2009 = Tue) */
 var oWeekday = (new Date (thisyear,thismonth-1,1)).getDay();
 /* calculate the offset (don't mess with this part, it took forever!) */
 var tOffset = (tWeekday < oWeekday) ? tWeekday + (7 - oWeekday) : tWeekday + (7 - oWeekday) - 7;
 var tDate = (tNthDay - 1) * 7 + tOffset + 1;
 /* if "last" was used, try to add another week (setup for 30 day months
  since May is the only month with a floating U.S. holiday that uses last, I think) */
 if (checkMonth && (tDate + 7) <= 30) { tDate = tDate + 7; }
 return tDate;
}
function checkAll(){
 $('body').append('<br><br><div id="thumbnails"></div>');
 var tn = $('#thumbnails');
 for (j=0;j<images.length;j++){
  tn.append('<img src="'+images[j][1]+'" height="100" width="100">');
 }
}
</script>

• As the code is right now, the image will display next to this script. So you can put this script into any free form text/HTML content box and the image will display there.
• If you want to make the script change the Banner image, remove the top line <center><img id="todaysimage" src=""></center> (in blue) and the image in the banner will be replaced.
• If you have a subscribed site and you have more than one image in the banner, move the blue line into your banner.

• If the script will only change an image contained in a free form text/HTML, then you can include all of the code above in that content box (make sure you paste it while the editor is in HTML mode) - there is no size limit on it's contents.
• If you plan on using the script for the Banner image, then it might be best to put this code into an external file because the banner HTML and footer HTML contents are limited:

• Copy all the code between the top <script> tag and the bottom </script> tag, then paste it into a (non-rich) text editor.
• Modify the dates and image URLs as desired
• Save the file with a ".js" extension (e.g. banner.js)
• Upload it to your file area
• Now just add the following into your Banner HTML or Footer HTML:
  
  <script type="text/javascript" src="banner.js"></script>

• To add an image, add it to the array following this template:
  

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

• 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. Again, I'll 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).


• The Image URL (in orange) should be a complete URL to the image.

• This is the first time I've included a way to trouble shoot a problem along with the script.
• 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 purple) 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, with the latest changes, you can now access the debug mode from the address bar simply by adding the following (in purple) 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;


• Example 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

<script type="text/javascript" src="BANNER.JS"></script>