0

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
gtest1

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
gtest2

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>
    <? } ?>

Edited by OsaMasw

3
Contributors
11
Replies
15
Views
4 Years
Discussion Span
Last Post by LastMitch
0

@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.

0

@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.

Edited by LastMitch: grammer

0

this how was the result
test3

@simplypixie Yes I need only 3 columns per page

0

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;
}
0

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.

0

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

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

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>
}
?>
0

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.
temp_sol

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.

0

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.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.