Sk Codebase > Javascript > Picture Of The Day

Source/Downloads

In General: This page demonstrates the dynamic source behind a fully automated image of the day gallery and past image archive template. (automated, except you of course have to post all the images)

The template's default mode is a 7 day thumbnail gallery. But can also be configured to sequentially paginate images.

Working Example:
Chris Carroll Daily

<head>
<script type='text/javascript'>
/* --------------------------------- */
/*     SOPHIAKNOWS: JAVASCRIPT       */
/* --------------------------------- */
/*       PICTURE OF THE DAY          */
/* --------------------------------- */
/*  Created:  2002-01-15             */
/*  Issued:   2003-01-15             */
/*  Modified: 2004-12-17             */
/*  Component: JS POD                */
/*  Copyright (c) 2001-2004          */
/*  Tony Pisarra, SophiaKnows        */
/* --------------------------------- */
/* --------------------------------- */

/*
This template builds an automated image
of the day gallery and archive
*/

/* POD: (PARSEFORM) */

var formdata=new Array();
function ParseForm() {
    if (document.location.search.indexOf('=')>-1) { 
        keyvalues=unescape(document.location.search.substring('1').replace(/\+/g,' ')).split("&");
        for(p=0;p<keyvalues.length;p++) {
            pairs=keyvalues[p].split("=");
            formdata[pairs[0]]=pairs[1];
            }            
        }
    }

ParseForm();

/* POD: (begin user editable) */

	/* POD: (set thumbs path) */
	var thumbpath="thumbs/"

	/* POD: (set big path) */
	var bigpath="big/"

	/* POD: (uselabel (true | false)) */
	var uselabel=false;

/* POD: (end user editable) */

/* POD: (begin main) */

	/* POD: (init date object) */
	var now = new Date();
	
	/* POD: (init days array) */
	var days=new Array();
	
	/* POD: (init counter) */
	var start=((formdata['start'])?parseInt(formdata['start']):0);;
				
	/* POD: (init thumbs hash) */
	var hash = "";

	/* POD: (start thumbnail hash) */
	for(i=0;i<=6;i++) {
	   days[i]=new Date(now.getTime()-((parseInt(start)+i)*86400000));
	   hash+="<p>";
	   hash+="<a href=\"";
	   hash+="javascript:SwapImage('big','"+bigpath+ReturnDateImg(days[i],'jpg')+"')";
	   hash+="\"  title=\""+ReturnUSDate(days[i])+"\">";
	   hash+="<img src=\""+thumbpath+ReturnDateImg(days[i],'jpg')+"\" border=0 \/>";
	   hash+="<\/a>"
	   hash+=((uselabel)?"<div class=plabel>"+ReturnUSDate(days[i])+"<\/div>":"");
	   }
	/* POD: (end thumbnail hash) */
	
	/* POD: (BUILD BASEIMAGE) */
	var baseImage="<img src="+bigpath+ReturnDateImg(days[0],'jpg')+" name='big' \/>";

/* POD: (end main) */
/* POD: (begin subroutines) */

/* POD: (IMAGE SWAP) */
function SwapImage(theName,theSource) {
	document.images[theName].src=theSource;
	document.images[theName].alt=theSource;
   }

/* POD: (RETURN IMAGE) */
function ReturnDateImg(then,postfix) {
   var when=new Date(then);
   var t=when.getFullYear()+"-";
   t+=Return2Digits((when.getMonth()+1))+"-";
   t+=Return2Digits(when.getDate());
   t+="."+postfix;
   return t;
   }


/* POD: (RETURN US STANDARD DATE) */
function ReturnUSDate(date) {
   var us=Return2Digits(date.getMonth()+1);
   us+="/"; 
   us+=Return2Digits(date.getDate()); 
   us+="/"; 
   us+=date.getFullYear();
   return us;
   }

/* POD: (APPEND LEADING ZERO) */
function Return2Digits(numin) {
	return ((numin<10)?("0"+numin):numin);
	}

/* POD: (end subroutines) */
</script>
</head>

<body>

<table width=100%><tr>
<td width=150>

<!-- WRITE THUMNAILS -->
<script type="text/javascript">
document.write(hash);
</script>

<td width=* align=center>

<!-- WRITE BASE IMAGE -->
<script type="text/javascript">
document.write(baseImage);
</script>


</td>
</tr></table>
</body>