Jump to content

Displaying 3 Images Per Row?


MoFish

Recommended Posts

hello. im trying to create a gallery type page. I currently have all my images cascading down my page, but really would like 3 on each row. im not sure really how to go about this. does anyone mind helping me along? im guessing im going to need some sort of count, and if the count equals 3 then take a new row. but am unsure how exactly to put this into code. :(

any help would be greatly appreciated. Thanks, Mofish

[code]
while ($myrowimage = mysql_fetch_array($imageresult) ) {     
    
  $image = $myrowimage["image"];
  $name = $myrowimage["author"];

   echo "<table width='100%' border='0' cellspacing='0'>";
   echo "<tr align='left' style='border:1px solid black'>            
  
  <td align='left'><a href='gallery/$image'><img src='gallery/tn_$image' /></a></td>
  <td align='right'><div>$image</div></br>Image Posted By <b>$name</b></td>
             </tr>";    

}
                
  echo "</table>\n";    
[/code]
Link to comment
Share on other sites

[!--quoteo(post=364878:date=Apr 14 2006, 03:19 PM:name=MoFish)--][div class=\'quotetop\']QUOTE(MoFish @ Apr 14 2006, 03:19 PM) [snapback]364878[/snapback][/div][div class=\'quotemain\'][!--quotec--]
hello. im trying to create a gallery type page. I currently have all my images cascading down my page, but really would like 3 on each row. im not sure really how to go about this. does anyone mind helping me along? im guessing im going to need some sort of count, and if the count equals 3 then take a new row. but am unsure how exactly to put this into code. :(

any help would be greatly appreciated. Thanks, Mofish

[code]
while ($myrowimage = mysql_fetch_array($imageresult) ) {     
    
  $image = $myrowimage["image"];
  $name = $myrowimage["author"];

   echo "<table width='100%' border='0' cellspacing='0'>";
   echo "<tr align='left' style='border:1px solid black'>            
  
  <td align='left'><a href='gallery/$image'><img src='gallery/tn_$image' /></a></td>
  <td align='right'><div>$image</div></br>Image Posted By <b>$name</b></td>
             </tr>";    

}
                
  echo "</table>\n";    
[/code]
[/quote]


this could help

[code]
$row_count = mysql_num_rows($imageresult);
echo "<table width='100%' border='0' cellspacing='0'>";
$i=0;
while ($myrowimage = mysql_fetch_array($imageresult) ) {     
  $image = $myrowimage["image"];
  $name = $myrowimage["author"];
    if($i==3){
    echo "</tr><tr align='left' style='border:1px solid black'";
   $i=0;
   } else {
     $i++;
   }//if  
  echo "<td align='left'><a href='gallery/$image'><img src='gallery/tn_$image' /></a></td>
  <td align='right'><div>$image</div></br>Image Posted By <b>$name</b></td>";

}//while                
  echo "</table>\n";    
[/code]
Link to comment
Share on other sites

thanks for the fast reply. slight problem however. If there ends up being 7 images in the gallery, its got a tendency to add an extra image on the row above for some strange reason, instead of taking the new line. how can i cater for the missing image's on the row's?

I have another question aswell, saves me making a new thread when this one is perfectly fine. i have a registration section to my website. people are signing up with the same names which i really dont want. i was going to add a simple validation to make sure the usernames differ slightly.

I thought something like the following would work, but there seems to be a slight problem somewhere. what exactly am i doing wrong with this?

thanks a bunch!

[code]
$checkname = "select * from `user_details` where name ='$name'";

$ret = (mysql_query($checkname));
    
if (@mysql_num_rows($ret) > 0) {

        $errormsg = 'Someone Else Has That Username';
        $success = '<a href="index.php?page=register"><b>Back</b></a>';

} else {

//registration ok, crack on and sign them up
}
[/code]
Link to comment
Share on other sites

You should learn how to use CSS. With the proper coding of CSS, you don't have to worry about when to form a new row.

[a href=\"http://www.ny-njdogtrainer.com/gallery.php\" target=\"_blank\"]This[/a] page shows a gallery of thumbnail pictures I created. There are 3 pictures one each row and it's all done with CSS. Not a table in sight.

There are two CSS classes in use.[ol type=\'1\'][*]The class for the div that holds the pictures[*]The class for each thumbnail[/ol]What makes this work is that the class for each thumbmail has a defined height and has the "float:left" characteristic.

The PHP code to generate the gallery would be something like this:
[code]<?php
echo '<div class="gallery">';
     foreach (glob("pictures/*.jpg") as $filename) { // get the pictures to be displayed
           echo '<a class="pic" href="' . $filename . '">' . $filename . '</a>';
echo '</div>';
?>[/code]
The above is simplified. I create the thumnail pictures on the fly, so my code was slightly more involved.

Using CSS also will adjust the number of pictures per row depending on the size of the screen if the main <div>'s width is defined as percentage of the screen's width.

BTW, I also use this technique when designing forms.

Ken
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.