Javascript Tutorial - Create Photo Album
Posted: Sun May 11, 2008 9:35 pm
Do you want a simple way to show off you photos? The script below creates a picture object that contains an url to the picture a thumbnail a comment and the size of the pop up window.
Next thing is creating an array of the photo objects and fill it up with the info.
Now we have to turn our array into actual HTML. To do that you can create a function that spits out table information.
This created a variable named alltable that we can use to write the table. The table will alternate in colors and make a nice little pattern. Currently I believe it is 4 wide. I have cropped all the images so that the thumbnails are 120px each in width
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:
and in the body tag we will call the code.
And tada it works. Now if you want more months create more arrays and use hyperlinks to change the page.
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>