Photo Album Script: Add page numbers to top also?

[dmwhipp]

Hi,

I'm using the Photo Album script (http://www.dynamicdrive.com/dynamicindex4/photoalbum.htm) to redo my client portfolio section here:
http://www.dwwebdesigns.com/portfolio2.html

So far I'm loving it and it will be much easier to maintain than my old method of adding 1 new page per client.

However, is there any way to have the page numbers appear ABOVE and beneath the gallery shots?

And I've been messing with css trying to figure out how to have a little padding between the image and the text. Adding a white space to the bottom of the image wouldn't work since I'm leaving the border around the image so visitors will know it's a link. It is possible to just add a break, but I'd prefer to use css and have less space than a break if possible. Any help there would be appreciated too.

Thanks!

Deborah

[jscheuer1]

Add to the navlinks styles like so (additions red):


#navlinks, #topnavlinks { /*CSS for DIV containing the navigational links*/
width: 400px;
}

#navlinks a, #topnavlinks a { /*CSS for each navigational link*/
margin-right: 8px;
margin-bottom: 3px;
font-size: 110%;
}

#navlinks a.current, topnavlinks a.current { /*CSS for currently selected navigational link*/
background-color: yellow;

Add this code:


document.write('<div id="topnavlinks">')
for (i=1; i<Math.ceil(galleryarray.length/totalslots)+1; i++)
document.write('<a id="topnavlink'+i+'" href="javascript:jumptopage('+i+')\">Page'+i+'</a> ')
document.getElementById("topnavlink1").className="current"
document.write('</div>')

right under the line:


var totalslots=dimension.split("x")[0]*dimension.split("x")[1]

Add these lines (red) to the jumptopage(p) function:


function jumptopage(p){
var startpoint=(p-1)*totalslots
var y=1;
for (i=0; i<totalslots; i++){
document.getElementById("slide"+i).innerHTML=(typeof galleryarray[startpoint+i]!="undefined")? buildimage(startpoint+i) : ""
}
while(document.getElementById("navlink"+y)!=null){
document.getElementById("navlink"+y).className=""
document.getElementById("topnavlink"+y).className=""
y++
}
document.getElementById("navlink"+p).className="current"
document.getElementById("topnavlink"+p).className="current"
}

Note: If you want more space below the topnavlinks than provided for by the code, you can add to the style section:


#topnavlinks {
margin-bottom:30px;
}

Use whatever value you prefer for the bottom margin.

[dmwhipp]

I have the script up and working here:
http://www.dwwebdesigns.com/portfolio.html

I love it! It will be so much easier adding new clients to the portfolio - I'll only have to edit one page rather than editing the page number links on many.

I removed the bottom links altogether and was getting and error message, till I realized I had to take the references to #navlinks out everywhere. It's working like a dream.

Thanks for taking the time to do this.

Deborah