MistOnline

JavaScripts

Random images per day using javascript and jquery

Oct 31, 2010

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

Related Tutorials:

Related Post

JavaScripts

How to toggle password in input field using Javascript(show / hide)

admin May 16, 2016
JavaScripts

How to create custom right click menu using Javascript

admin May 12, 2016
JavaScripts PHP

How to force download file using php

admin Feb 10, 2015
One thought on “Random images per day using javascript and jquery”

Leave a Reply

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