Between the header and footer in show_pictures_h.php, the php code and html shown above will parse to look like this:

The trick, discovered only after repeated dead ends is the nested loop. The first for loop finds out how many rows to display and prints the <tr> tags. The second nested loop finds out how many <td> tags to print in each row. And because we already defined this to equal to 5, the inside loop prints out 5 table cells before giving control back over to the outside loop which then prints another row (if need be) and then lets the inside loop do its thing again until both loops are satisfied and no longer return a true value.

Because the data we want to display resides in the table cells, we don't break out the array values that contain all that data until we are inside the 2nd loop.

Cha ching! In our case we only wanted the thumbnail image and the caption. Each thumbnail however is surrounded with a hyperlink that requests something along these lines:

http://localhost/gallery/enlarge_image.php?ID=22&CAT=3&AID=2

Clicking on the thumbnail image opens another page with a larger version of the image. Nothing special here... just another query that displays the results of the SELECT string parameters (imageID, catalogID and albumID) attached to the thumbnail hyperlink. The code behind the enlarge_image.php page is almost identical to what we have looked at here. The only difference is in the html and the CSS used to display the one large image rather than loop thru an array of returned rows.

You may see all of this in action at Mooney Mountain Guides Please be aware that all mountaineering images displayed here are © 2004 by Art Mooney.

Hope this helps you with your PHP/MySQL projects and remember, keep it simple.