Menu
Community /Pin to ProfileBookmark
@NogDogMay 05.2006 — #Another possibility would be to put each thumbnail and caption into a DIV, which you define via CSS to be a "float: left;" element. This will fill the available space on each line with thumbnails and then automatically wrap to the next line if there are more.
Style:
HTML:
Best way to layout a dynamic gallery
I’m trying to make my site as dynamic as possible. Right now I have a main gallery list where people can select which gallery the would like to view and then all of the pictures from that category are displayed with a caption. As it is just now, the first thumbnail will display, followed by the caption, followed by the second thumbnail, followed by the caption, and so on. The link is [url]www.namik.co.uk/gallery.php
Can anyone advise of a way in which I could have the images displayed with the text beneath them. I was thinking having a loop which would count to 4 while displaying the images then echo a line break, then count to 4 while displaying the captions, then start again until everything has been displayed but all of my attempts have failed so far. I don’t want to go down the road of having to insert the caption as an “alt” text as I know this fecks up the accessibility of the site.
[code=php]<?php
$pagehead = ‘Namik – Gallery’;
include( “guestbook/misc.inc” );
include( “pagehead.php” );
mysql_connect(“$host”, “$user”, “$password”)or die(“Cannot connect to database”);
mysql_select_db(“$database”)or die(“cannot select DB”);
$category = $_GET[‘id’];
$result = mysql_query(“SELECT * FROM gallery_photos WHERE photo_category = $category”);
$result2 = mysql_query(“SELECT * FROM gallery_category WHERE category_id = $category”);
while ($row2 = mysql_fetch_assoc($result2)) {
$name = $row2[“category_name”];
}
echo “<h1>$name</h1>”;
if ($result && mysql_num_rows($result)) {
$numrows = mysql_num_rows($result);
echo ‘<p>There are ‘ . $numrows . ‘ pictures in the ‘ . $name . ‘ category:<br />
Click on a thumbnail to view the full sized image.<br /><a href=”gallery.php”>Back</a></p>’;
echo ‘<p>’;
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
echo “<a class= ‘linksimg’ href=’img/gallery/” . $row[‘photo_filename’] . “‘ ><img src=’img/thumbs/” . $row[‘photo_filename’] . “‘ /></a>”;
echo $row[‘photo_caption’] . “n”;
}
} else {
echo ‘<p>There are currently no images in the ‘ . $name . ‘ category.<br /> Please select another category.’;
}
echo ‘</p>’;
?>
</div>
</body>
</html>
Sign in
to post a comment8 Comments(s) ↴
0
@NogDogMay 05.2006 — #Another possibility would be to put each thumbnail and caption into a DIV, which you define via CSS to be a "float: left;" element. This will fill the available space on each line with thumbnails and then automatically wrap to the next line if there are more.Style:
<i>
</i>div.thumb {
float: left;
width: 200px; /* adjust to desired width */
margin: 10px;
text-align: center;
}
HTML:
[code=html]
<div class='thumb'>
<p><img src="foo.jpg" alt=""></p>
<p>Caption text here</p>
</div>
<div class='thumb'>
<p><img src="foo.jpg" alt=""></p>
<p>Caption text here</p>
</div>
...etc...
[/code]