Javascript Tutorial - Create Photo Album

For general web development questions that are not specifically related to CSS HTML Validator. This includes (but is not limited to) general HTML, CSS, Accessibility, JavaScript, and SEO questions.
Post Reply
0alva
Rank 0 - Newcomer
Posts: 2
Joined: Thu May 08, 2008 10:17 pm
Contact:

Javascript Tutorial - Create Photo Album

Post by 0alva »

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.

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;
   }
Next thing is creating an array of the photo objects and fill it up with the info.

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');
Now we have to turn our array into actual HTML. To do that you can create a function that spits out table information.

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  
}
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:

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>
 
and in the body tag we will call the code.

Code: Select all

<body onLoad="make_page(month11);"> 
And tada it works. Now if you want more months create more arrays and use hyperlinks to change the page.

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>
 
Post Reply