Code: Select all
function photo_obj(pic,thumb,caption,width,height)
{
this.pic=pic;
this.thumb=thumb;
this.caption=caption;
this.width=width;
this.height=height;
}
Code: Select all
month11= new Array();
month11[0]= new photo_obj('images/month11/cleaning.jpg','images/month11/cleaning_tn.jpg','Cleaning house?','500','680');
month11[1]= new photo_obj('images/month11/guilty.jpg','images/month11/guilty_tn.jpg','Guilty!!','500','680');
month11[2]= new photo_obj('images/month11/grandpa1.jpg','images/month11/grandpa1_tn.jpg','Elephants and Grandpa','680','500');
month11[3]= new photo_obj('images/month11/grandpa2.jpg','images/month11/grandpa2_tn.jpg','I love Grandpa','680','500');
month11[4]= new photo_obj('images/month11/al.jpg','images/month11/al_tn.jpg','Handsome uncle Al','500','680');
month11[5]= new photo_obj('images/month11/eat.jpg','images/month11/eat_tn.jpg','Love to eat','680','500');
month11[6]= new photo_obj('images/month11/tongue.jpg','images/month11/tongue_tn.jpg','Like my tongue?','500','680');
month11[7]= new photo_obj('images/month11/walking.jpg','images/month11/walking_tn.jpg','Walking with help','500','680');
Code: Select all
function make_page(pic_obj) {
tableTop='<TABLE cellspacing=0 cellpadding=3 border=1 bordercolor=white>';
tableBottom='</tr></TABLE>';
tablebody='';
mybg="#99ccff";
for (var n = 0 ; n <=(pic_obj.length-1) ; n++) {
myind=pic_obj.length-n-1
if (!(n%4)) {
tablebody +='<TR>'
if (mybg=="#99ccff") {
mybg="#FFEEAA"; }
else {
mybg="#99ccff";
}
}
if (mybg=="#99ccff") {
mybg="#FFEEAA"; }
else {
mybg="#99ccff";
}
tablebody+='<TD valign=top bgcolor="'+mybg+'" align=center><A href="javascript:pager(\''+ pic_obj[myind].pic + '\',\'' + pic_obj[myind].width + '\',\''+ pic_obj[myind].height + '\')"><IMG src="'+ pic_obj[myind].thumb + '" border=0><BR>'+ pic_obj[myind].caption + '</A></TD>\n';
if (!((n+1)%4)) {
tablebody +='</TR>'
}
}
alltable= tableTop+tablebody+tableBottom;
document.myAlbum.InnerHtml=alltable; //assuming IE --change for others or create a function
}
I also have a small script that is called when the object is selected that pops up the image in new window. Here it is:
Code: Select all
var popup = null;
function pager(pic,wide,high){
popup = window.open(pic,'pic','scrollbars,resizable,width='+wide+',height='+high);}
function destroyPop() {
if (popup != null && popup.open) popup.close();
}
window.onfocus=destroyPop; //destroys popup on refocus the window
All the above javascript can sit in one javascript tag in the head of your html page.
In the body of the page you need to place a div and give it a name like
<div id=myAlbum> Note I used myAlbum inside of the code for creating a table.
</div>
Code: Select all
<body onLoad="make_page(month11);">
Code: Select all
<a href="javascript:make_page(myphotos);">Month 1</a>
<a href="javascript:make_page(month2);">Month 2</a>
<a href="javascript:make_page(month3);">Month 3</a>
<a href="javascript:make_page(month4);">Month 4</a>