Displaying Images In...

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

Post Reply
MarcS
Forum Newbie
Posts: 2
Joined: Mon Mar 03, 2008 7:30 pm

Displaying Images In...

Post by MarcS »

~pickle | Please use

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]


I'm trying to display images in a table while drawing it from MySQL. I'd like it to view as..

| 1 | 2 | 3 | 4 | 5 |
| 6 | 7 | 8 | 9 | 10 |
etc

Except i either get it to view as all of the entries in the database as 1-xx in a vertical table... 

How do i get it to be a 5 col table and the row fills as an entry is added in the mysql database.

I know i gotta put the HTML coding in the right place but where?...

Code: Select all

echo "<table width='200' border='0' align='center' cellpadding='1' cellspacing='1'>";
    while ($data = mysql_fetch_array($result)) {
        echo "<tr><td><a href='";
        echo $data['photo'];
        echo "' rel='lightbox[roadtrip]'  title='"; 
        echo $data['title'];
        echo "'><img src='";
        echo $data['photo'];
        echo "' width='150' height='150' border='0'></a></td>";
    }
        echo "</tr></table>";

~pickle | Please use

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]
User avatar
HCBen
Forum Commoner
Posts: 33
Joined: Thu Jun 22, 2006 3:15 pm
Location: Indiana

Re: Displaying Images In...

Post by HCBen »

Try thinking outside the box, err table. If all your images are 150x150, don't use a table at all. Let the images do the positioning and wrapping for you with some simple CSS.

Start with a fixed width container div. In this case, since you want 5 images across (and let's not assume any padding, margin or border spacing), the div should be 750px in width. Add some CSS to the images making them display:block; and float:left; Now simply add each image, using your php while loop, inside this div.

Since each image is a block element, floated left, with a fixed width, they'll each be added one after another from right to left. Then when the sixth image is added, it'll simple float down to another "row" beneath the previous five images and continue this process until you run out of images.

That's it.

From here, just keep tweaking the CSS for the container div and images to get them to display nicely on the page.

Cheers!
Ben

P.S. There is an alternative way to do this with a table, but you should always avoid using tables whenever possible for design/layout.
MarcS
Forum Newbie
Posts: 2
Joined: Mon Mar 03, 2008 7:30 pm

Re: Displaying Images In...

Post by MarcS »

Wow, got it exactly as i wanted.... didn't think it would be that easy.. thanks alot! :D
Post Reply