PHP photo - thumbnail layout

[hsl]

I'm afraid I'm new to this posting to a thread and am probably not doing it correctly, but I've run into a problem with this amazing script http://www.dynamicdrive.com/dynamicindex4/php-photoalbum.htm. I can get the images to load from the right directory, keeping their aspect ratio and loading a larger version with the lightbox viewer (http://www.dynamicdrive.com/dynamicindex4/php-photoalbum_suppliment.htm) - all perfect. But the one thing they won't do is line up across the page and I can't work out why. I would like them in 5 cols x 3 rows but they just group vertically in blocks down the left of the page.

<script type="text/javascript">

new phpimagealbum({
albumvar: myvacation, //ID of photo album to display (based on getpics.php?id=xxx)
dimensions: [5,3],
sortby: ["date", "desc"], //["file" or "date", "asc" or "desc"]
autodesc: "", //Auto add a description beneath each picture? (use keyword %i for image position, %d for image date)
showsourceorder: false, //Show source order of each picture? (helpful during set up stage)
onphotoclick:function(thumbref, thumbindex, thumbfilename){
thumbnailviewer.loadimage(thumbref.src, "fit2screen")
}
})

</script>

I've tried moving it around, but the script is in a table to at least keep it centred. As I'm such a novice I probably have a really weird set up to my pages, I have separate / interchangeable headers and footers, all php - could be the problem? I don't know - please help! Unfortunately I also don't know how to include my files to show what going on.

Just a thought - is there a fourth file (in addition to the getalbumpics.php, ddphpalbum.js & ddphpalbum.css) that isn't loading? Could it be that?!

Thanks in hope.

[jscheuer1]

There's a good chance there isn't room enough for them to appear any other way. That's governed by the layout and the css.

Not being a mind reader though, I have no idea of the particulars in this case.

If you want more help:

Please post a link to a page on your site that contains the problematic code so we can check it out.

[hsl]

Sorry, I didn't have the full posting options last night and couldn't attach files. Now I have a paperclip for attachments, but your comment prompted me to check through the .css files again and I've found that changing back an alteration I made to the .photodiv alignment has fixed it (although I originally changed it to "center" from "left" because it wouldn't display properly, so I don't quite understand, but still).

Anyway, I've changed it back and it works! Now all I would like is for the images to be centred and preferably to display continuously rather than in set columns x rows, as they're of such varying widths. Is that possible? I'll live with this if it's not - as I'm sure you can tell I am only an amateur: doing this as a favour!

http://www.loweco.co.uk/nigel_home_thumbs.php

Many thanks.

[I originally tried out your crawler code for this page but, owing to the number of images and for ease of maintenance, wanted automatic file fetch. You are a genius! :) ]

[jscheuer1]

I can't seem to make a local mock up of the page. I think the server doesn't allow hotlinking. That makes it difficult to be certain. But this (replace your existing ddphpalbum.css file with it) works well in Firefox developer tools:


/* ######### CSS for PHP Photo Album itself ######### */

#phpphotoalbum1 {
width: 840px;
margin: 0 auto;
}

.photodiv{ /*CSS for DIV containing each image*/
float: left;
margin-bottom: 10px;
width: 280px;
text-align:center;
}

.photodiv img{ /*CSS for each image tag*/
border: 2;
height: 70px;
cursor: hand;
cursor: pointer;
}

.albumnavlinks{ /*CSS for DIV containing the navigational links*/
text-align: center;
}

.albumnavlinks a{ /*CSS for each navigational link*/
margin-right: 5px;
padding: 1px 5px;
border: 1px solid #9aafe5;
text-decoration: none;
color: #C0C0C0;
font-weight: bold;
}


.albumnavlinks a:hover, .albumnavlinks a.current{ /*CSS for currently selected navigational link*/
border: 1px solid #C0C0C0;
background-color: grey;
}

/* ######### CSS for thumbnail viewer plugin ######### */

#thumbBox{ /*Outermost DIV for thumbnail viewer*/
position: absolute;
left: 0;
top: 0;
width: auto;
padding: 8px;
padding-bottom: 0;
background: #313131;
visibility: hidden;
z-index: 10;
cursor: hand;
cursor: pointer;
-ms-filter: "progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=5, offY=5, positive=true)"; /* IE8 drop shadow*/
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=5, offY=5, positive=true); /* IE drop shadow*/
}

#thumbBox .footerbar{ /*Footer DIV of thumbbox that contains "close" link */
font: bold 14px Tahoma;
letter-spacing: 5px;
line-height: 1.1em;
color: white;
padding: 5px 0;
text-align: right;
}


#thumbBox #thumbImage{ /*DIV within thumbbox that holds the enlarged image */
background-color: white;
margin: 5px;
}

#thumbLoading{ /*DIV for showing "loading" status while thumbbox is being generated*/
position: absolute;
visibility: hidden;
border: 1px solid black;
background-color: #EFEFEF;
padding: 10px;
font: bold 14px Arial;
z-index: 5;
}

Notes:

For parts of this to work in IE the page needs a standards invoking DOCTYPE. Place this as the very first thing before the opening <html> tag:


<!DOCTYPE html>

And, as I said, I couldn't fully test it, so some tweaking may be required.