Results 1 to 7 of 7

Thread: Photo Album up-down instead of left-right

  1. #1
    Join Date
    Dec 2008
    Location
    California
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Photo Album up-down instead of left-right

    1) PHP Photo Album

    2) http://www.dynamicdrive.com/dynamici...photoalbum.htm

    3) Just cannot get the images to show up on one line as in pic 1 pic 2, they just keep stacking on top of each other. Have read through numerous past posts, and instructions, just can't get it to display properly.

    The page I am using the experiment with is:
    http://www.bluewaterboatlettering.com/gallery3.php

    ========================================
    Fyi just incase, main css - http://www.bluewaterboatlettering.com/css/main.css
    Getpic.php path: http://www.bluewaterboatlettering.co...ll/getpics.php

    THX All !

    4 pictures in that directory, size = 200x100 and 100x75

    ========================================

    Within gallery.js:
    var dimension="2x1"; //Specify dimension of gallery (number of images shown), such as 4x2, 3x1 etc
    var imagepath="http://www.bluewaterboatlettering.com/images/boatSmall/"; //Absolute path to image directory. Include trailing slash (/)

    ========================================

    Within gallery.css:
    body {
    /*<style type="text/css">*/

    .slideshow{ /*CSS for DIV containing each image*/
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
    }

    .slideshow img{ /*CSS for each image tag*/
    border: 0;
    width: 200px;
    height: 106px;
    }

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

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

    #navlinks a.current{ /*CSS for currently selected navigational link*/
    background-color: yellow;
    }
    body {
    background-color: #0000FF;
    }
    </style>
    }
    ========================================

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Your gallery.css file (if it even exists on the server) isn't linked to your page, and you haven't added the style (Step 2 from the demo page) add at least:

    Code:
    .slideshow{ /*CSS for DIV containing each image*/
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
    }
    to one of your existing stylesheets.
    - John
    ________________________

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

  3. #3
    Join Date
    Dec 2008
    Location
    California
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by jscheuer1 View Post
    Your gallery.css file (if it even exists on the server) isn't linked to your page, and you haven't added the style (Step 2 from the demo page) add at least:

    Code:
    .slideshow{ /*CSS for DIV containing each image*/
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
    }
    to one of your existing stylesheets.
    Thx John - but no luck. Yes, gallery.css is on the server, and after my post I did notice the link to it was missing, but the snipet of code you recomended was in their, and I still have no luck.

    Anymore advice?

    Thx

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    I guess I could have been more clear. For now, get rid of gallery.css and use only:

    Code:
    .slideshow{ /*CSS for DIV containing each image*/
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
    }
    Though you may use the full gallery.css if you like. But if you do, make sure the thumbnails size is set correctly and that there is enough room where they are (not just visually, but also in the layout) for there to be more than one on a line.

    But, since you are apparently having trouble with this, start with just the above style, you can add back the full gallery.css and tweak it and other things later if you like.
    - John
    ________________________

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

  5. #5
    Join Date
    Dec 2008
    Location
    California
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Changed as you stated, with no luck.
    There should be plenty of room to display 2 200 wide pics in my container, when on this page i display a pic that is 585 wide:
    http://www.bluewaterboatlettering.com/gallery.php

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Your gallery.css file is invalid:

    Code:
    <style type="text/css">
    		.slideshow{ /*CSS for DIV containing each image*/
    		float: left;
    		margin-right: 10px;
    		margin-bottom: 10px;
    }
    </style>
    Remove the highlighted parts.
    - John
    ________________________

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

  7. The Following User Says Thank You to jscheuer1 For This Useful Post:

    regor (12-21-2008)

  8. #7
    Join Date
    Dec 2008
    Location
    California
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    That did work, stripping it down to the basics.

    Now to experiment and learn what the rest of the settings do and how they affect the photo album.

    THX

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
  •