VN:F [1.9.22_1171]
Rating: 10.0/10 (1 vote cast)

This script shows how to display random pics or images depending upon the day.This script use simple javascript approach along with jquery.

<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<style type="text/css">
body { background: #000; color: #ddd; margin: 20px auto; text-align: center; }
h1 { color: #fc0; text-align: center; }
img { margin: 0 auto; }
</style>
<body>
<img id="todaysimage" src="" alt=""/>
<script type="text/javascript">
var images = new Array();

/* Default images (these display if no images are found to display for today) */
images.push (["0","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/misc/main1.jpg"]);
images.push (["0","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/misc/main2.jpg"]);
images.push (["0","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/misc/main3.jpg"]);
images.push (["0","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/misc/main4.jpg"]);
images.push (["0","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/misc/main5.jpg"]);
images.push (["0","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/misc/main6.jpg"]);

/* Jan */
images.push (["12/31-1/5","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/misc/new-year.jpg"]);
images.push (["12/31-1/5","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/misc/NewYear2.jpg"]);
images.push (["12/31-1/5","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/misc/NewYear3.jpg"]);
images.push (["1/21","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/misc/hug.jpg"]);
images.push (["1/21","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/misc/squirrel.gif"]);
images.push (["1/24","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/misc/Laugh.jpg"]);

/* Feb */
images.push (["2/10-2/14","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/misc/VD1.jpg"]);
images.push (["2/10-2/14","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/misc/VD2.jpg"]);
images.push (["2/10-2/14","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/misc/VD3.jpg"]);
images.push (["2/10-2/14","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/misc/VD4.jpg"]);
images.push (["2/10-2/14","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/misc/VD5.jpg"]);
images.push (["2/10-2/14","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/misc/VD6.jpg"]);
images.push (["2/3rdMon","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/misc/wash1.jpg"]);
images.push (["2/3rdMon","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/misc/wash2.jpg"]);

/* Mar */
images.push (["3/15-3/17","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/misc/StPatty.jpg"]);
images.push (["3/15-3/17","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/misc/patty.jpg"]);

/* April */
images.push (["4/1","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/misc/april-fool-dog.jpg"]);
images.push (["4/1","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/misc/aprilfools.jpg"]);
images.push (["4/1","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/misc/april_fools1.jpg"]);
images.push (["4/20","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/misc/ninja.jpg"]);

/* May */
images.push (["5/5","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/misc/cinco1.jpg"]);
images.push (["5/5","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/misc/Cinco4.jpg"]);
images.push (["5/5","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/misc/mayo.jpg"]);
images.push (["5/5","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/misc/mayo2.jpg"]);
images.push (["5/5","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/misc/mayo3.jpg"]);
images.push (["5/10","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/misc/mom1.jpg"]);
images.push (["5/10","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/misc/mom2.jpg"]);
images.push (["5/10","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/misc/mom3.jpg"]);
images.push (["5/10","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/misc/mom4.jpg"]);
images.push (["5/18","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/misc/zombie_cat.jpg"]);
images.push (["5/lastMon","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/misc/memorial.jpg"]);

/* Jun */
images.push (["6/1","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/misc/hug.jpg"]);
images.push (["6/3rdSun","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/misc/fathers1.jpg"]);
images.push (["6/3rdSun","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/misc/fathers2.jpg"]);
images.push (["6/3rdSun","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/misc/fathers3.jpg"]);

/* Jul */
images.push (["7/4","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/misc/july4.jpg"]);
images.push (["7/4","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/misc/july4-2.jpg"]);
images.push (["7/4","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/misc/july4-3.jpg"]);
images.push (["7/4","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/misc/patrioticDog.jpg"]);

/* Aug */
images.push (["7/20-8/20","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/misc/summer1.jpg"]);
images.push (["7/20-8/20","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/misc/summer2.jpg"]);
images.push (["7/20-8/20","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/misc/summer3.jpg"]);
images.push (["7/20-8/20","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/misc/summer4.jpg"]);
images.push (["7/20-8/20","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/misc/summer5.jpg"]);
images.push (["7/20-8/20","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/misc/summer6.jpg"]);
images.push (["7/20-8/20","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/misc/summer7.jpg"]);

/* Sep */
images.push (["9/1stMon","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/misc/labor.jpg"]);
images.push (["9/1stMon","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/misc/labor2.jpg"]);
images.push (["9/1stMon","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/misc/labor3.jpg"]);
images.push (["9/19","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/misc/pirate1.jpg"]);
images.push (["9/19","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/misc/Pirate2.jpg"]);

/* Oct */
images.push (["10/25-10/31","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/misc/Halloween1.jpg"]);
images.push (["10/25-10/31","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/misc/Halloween2.jpg"]);
images.push (["10/25-10/31","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/misc/tequilacat.jpg"]);
images.push (["10/25-10/31","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/misc/Oct2.jpg"]);
images.push (["10/25-10/31","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/misc/Oct3.jpg"]);
images.push (["10/25-10/31","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/misc/Oct4.jpg"]);
images.push (["10/25-10/31","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/misc/Oct5.jpg"]);

/* Nov */
images.push (["11/11","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/misc/patrioticDog.jpg"]);
images.push (["11/3rdThur-11/4thThur","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/misc/thanksgiving1.jpg"]);
images.push (["11/3rdThur-11/4thThur","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/misc/thanksgiving2.jpg"]);
images.push (["11/3rdThur-11/4thThur","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/misc/thanksgiving3.jpg"]);
images.push (["11/3rdThur-11/4thThur","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/misc/thanksgiving4.jpg"]);

/* Dec */
images.push (["12/2-12/25","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/misc/Hanukkah1.jpg"]);
images.push (["12/2-12/25","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/misc/Hanukkah2.jpg"]);
images.push (["12/2-12/25","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/misc/Hanukkah3.jpg"]);
images.push (["12/15-12/30","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/misc/christmas.jpg"]);
images.push (["12/15-12/30","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/misc/christmas2.jpg"]);
images.push (["12/15-12/30","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/misc/christmas3.jpg"]);
images.push (["12/15-12/30","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/misc/christmas4.jpg"]);
images.push (["12/15-12/30","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/misc/christmas5.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').html("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&#91;j&#93;&#91;0&#93;.replace(/\s/,'');
 /* example datestr = "1/1-1/10" or "9/1stMon-9/1stWed" */
 var dates = datestr.split('-');
 var tMonthStartStr = parseInt(dates&#91;0&#93;.split('/')&#91;0&#93;,10);
 var tMonthEndStr = (typeof(dates&#91;1&#93;)=="undefined") ? tMonthStartStr : parseInt(dates&#91;1&#93;.split('/')&#91;0&#93;,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; 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()"/>');
}
if ( $('#todaysimage').length ) {
 $('#todaysimage').attr('src',currentImages[inc][1]);
} else {
 $('body').append('<img id="todaysimage" alt="" src="'+currentImages&#91;inc&#93;&#91;1&#93;+'"/>');
}

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&#91;k&#93;==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&#91;j&#93;&#91;1&#93;+'" height="100" width="100">');
 }
}
</images></weekdays></images></script>

Thanks DropBox

VN:F [1.9.22_1171]
Rating: 10.0/10 (1 vote cast)
One thought on “Random images per day using javascript and jquery”
  1. what if we want it to display an article or link instead for each day….

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)

Leave a Reply

Your email address will not be published. Required fields are marked *