Javascript Photo Album


Home \| FAQ \| About \| Contact \| View Source

SEARCH:

BROWSE:

My Hood

Edit My Info

View Events

Read Tutorials

Training Modules

View Presentations

Download Tools

Scan News

Get Jobs

Message Forums

School Forums

Member Directory

CONTRIBUTE:

Sign me up!

Post an Event

Submit Tutorials

Upload Tools

Link News

Post Jobs

Home > Tutorials > General Web Development > Javascript Photo Album

Add to MyHood

Javascript Photo Album [ printer friendly ]

Stats

Rating: 4.14 out of 5 by 7 users

Submitted: 03/12/03

Brian LeFevre ()

I wanted a simple way to show off my beautiful baby. What better way than a baby photo album. But to keep things fairly simple I wanted to display the newest pictures first and be able to look at older pictures without too much effort.

Well you could manually place all the pictures on one page and it will take a while to load. 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.

function photo_obj(pic,thumb,caption,width,height) 
   {
    this.pic=pic;
    this.thumb=thumb;
    this.caption=caption;
    this.width=width;
    this.height=height;
   }

The next thing I do is create an array of the photo objects and fill it up with the info.

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.

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:

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.

<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.

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

Return to Browsing Tutorials

Email this Tutorial to a Friend


Rate this Content:
low quality	1	2	3	4	5	high quality

Reader's Comments	Post a Comment

not a bad tutorial, but could have done a better job with the formatting of it.
-- J J, March 18, 2003

very difficult to read, otherwise this tutorial is pretty good at an overview of JScript and how to create an OnLoad webpage
-- Paul Bastide, March 19, 2003

This is a perfect example of why JavaScript sucks and why databases are much better for providing content.
-- Seth Peck, March 19, 2003

Great Job! 5 Stars *****
-- Ammon Beckstrom, March 19, 2003

Very well made tutorial. Easy to understand.
-- Spencer Isaacson, March 24, 2003

very handy tutorial. Thanks.
-- George Schwenzfeger, March 26, 2003

well done! I also had a baby recently and I also wanted to share her pictures (all my family lives in another country) I built something a little more complicated. Take a llok at http://www.rozenthal.com Roi
-- Roi Rozenthal, April 03, 2003

Conditions of Use | Privacy Notice