Results 1 to 3 of 3

Thread: Photo Album Script: Add page numbers to top also?

  1. #1
    Join Date
    Sep 2004
    Location
    Tallahassee, FL USA
    Posts
    197
    Thanks
    43
    Thanked 1 Time in 1 Post

    Default Photo Album Script: Add page numbers to top also?

    Hi,

    I'm using the Photo Album script (http://www.dynamicdrive.com/dynamici...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
    Last edited by dmwhipp; 04-30-2006 at 05:59 AM.
    Deborah Whipp
    Web Designer
    Tallahassee, FL
    www.DWWebDesigns.com

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,991
    Thanks
    43
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Sep 2004
    Location
    Tallahassee, FL USA
    Posts
    197
    Thanks
    43
    Thanked 1 Time in 1 Post

    Default Thanks!

    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
    Deborah Whipp
    Web Designer
    Tallahassee, FL
    www.DWWebDesigns.com

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •