Split array of data into columns

[OsaMasw]

Hello guys I need a favor,
I have array of data fetched form mysql db and contain 4 information
id - thumb - views - added by

I want to display those arrays in 3 or 4 coloumn like picture gallery.
I did it with only picture and its work

but when I try to add information under it its show in vertical
I need to devide the results into 3 or 4 column and each result look like this

Tried this but its useless

<? while($data = mysql_fetch_assoc($rs)) { ?>
<span><a href="details.php?pic=<? echo $data['id']; ?>"><img class="index_pic" width="200" height="200" src="pictures/thumbs/<? echo $data['thumb']; ?>" /></a><span>
    <? echo $data['user']; ?>----------- <? echo $data['views']; ?><img src="images/icon_view.gif" /></span></span>
    <? } ?>

[LastMitch]

@OsaMasw

I need to devide the results into 3 or 4 column and each result look like this

Post html table code not the one you just posted but your original one. Unless that code is the original one.

[OsaMasw]

@ LastMitch this is the original html code

[LastMitch]

@OsaMasw

@ LastMitch this is the original html code

OK, It's getting late so I make some minor adjustment:

From this:

<? while($data = mysql_fetch_assoc($rs)) { 
<span><a href="details.php?pic=<? echo $data['id']; ?>">
<img class="index_pic" width="200" height="200" src="pictures/thumbs/<? echo $data['thumb']; ?>" /></a>
<span><? echo $data['user']; ?><? echo $data['views']; ?>
<img src="images/icon_view.gif" /></span>
</span>
 } ?>

To this:

<?php

$data = mysql_fetch_array($rs)) {
$id = $_POST ['id'];
$thumb = $_POST['thumb'];
$user = $_POST['user'];
$views = $_POST['views'];

<span><a href="details.php?pic=<? echo $id; ?>">
<img class="index_pic" width="200" height="200" src="pictures/thumbs/<? echo $thumb; ?>" /></a>
<span><? echo $user; ?><? echo $views; ?><img src="images/icon_view.gif" /></span>
</span>
}
?>

Let me know how it goes.

[simplypixie]

Do you want the number of columns to be set or to be determined by the width available on the screen?

[OsaMasw]

this how was the result

@simplypixie Yes I need only 3 columns per page

[simplypixie]

OK, starting with the PHP you need to count the images and then check if you need to create a new row (i.e. after every 3 images).

<?php
  $count = 0;
  $num_images = mysql_num_rows($rs);
  while($data = mysql_fetch_assoc($rs)) {
?>
<?php if ($count == 0 || ($count %3 == 0 && $count < $num_images)) { ?>
  <div class="row">
<?php } ?>
  <span>
    <a href="details.php?pic=<? echo $data['id']; ?>">
      <img class="index_pic" width="200" height="200" src="pictures/thumbs/<? echo $data['thumb']; ?>" />
    </a><br>
    <? echo $data['user']; ?>----------- <? echo $data['views']; ?><img src="images/icon_view.gif" />
  <span>
<?php
  $count++;
  if ($count %3 == 0) {
?>
  </div>
<?php  } ?>

The %3 == 0 means if the $count divided by 3 leaves a difference of 0 then you have displayed 3 images in a row and it is time to start a new row.

Then you need to add come CSS to style the row class to ensure it is displayed underneath each time (not sure what CSS you have so can't advise very well, but):

.row {
  width: 100%;
  display: block;
}

[OsaMasw]

Still the same :(, the code works perfectly, if there were pictures x 3 like 3-6-9 but if there is 5 pictures the div don't close,
anyway the problem still the same.

[simplypixie]

Sorry I missed a bit when checking if a div needs closing

<?php
  $count++;
  if ($count %3 == 0 || $count == $num_images) {
?>
  </div>
<?php  } ?>

[LastMitch]

this how was the result

OK.

Try this (take away $user & $view):

<?php
$data = mysql_fetch_array($rs)) {
$id = $_POST ['id'];
$thumb = $_POST['thumb'];
$user = $_POST['user'];
$views = $_POST['views'];

<span>
<a href="details.php?pic=<? echo $id; ?>">
<img class="index_pic" width="200" height="200" src="pictures/thumbs/<? echo $thumb; ?>" />
</a>
<span>
<img src="images/icon_view.gif" />
</span>
</span>
}
?>

or try this (I put a <br/> for the captions):

<?php
$data = mysql_fetch_array($rs)) {
$id = $_POST ['id'];
$thumb = $_POST['thumb'];
$user = $_POST['user'];
$views = $_POST['views'];

<span>
<a href="details.php?pic=<? echo $id; ?>">
<img class="index_pic" width="200" height="200" src="pictures/thumbs/<? echo $thumb; ?>" />
</a>
</br>
<span>
<? echo $user; ?><? echo $views; ?>
</br>
<img src="images/icon_view.gif" />
</span>
</span>
}
?>

[OsaMasw]

as I told before without the caption its working great but when inserting the caption and became vertically, I have temperary solution for this by using tooltip in Jquery ui, its fancy but not as i want it.

i got an idea for this, how about creating table

<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
</table>

and every 3 images close with </tr> and open new <tr> so it will be more accurate, i'll try with this and post the code.

[LastMitch]

as I told before without the caption its working great but when inserting the caption and became vertically, I have temperary solution for this by using tooltip in Jquery ui, its fancy but not as i want it.

I'm a bit confused which is photoshop or which is actually code. But since you using tooltip that is a another option.