Add to the navlinks styles like so (additions red):
Code:
#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:
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:
Code:
var totalslots=dimension.split("x")[0]*dimension.split("x")[1]
Add these lines (red) to the jumptopage(p) function:
Code:
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:
Code:
#topnavlinks {
margin-bottom:30px;
}
Use whatever value you prefer for the bottom margin.
Bookmarks