Have a question? ask www.kenlet.com
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
 
Copyright © 2001 DevHood® All Rights Reserved