Loop Images 3 Images wide in PHP

[patk570]

I have a code that is working to show images and description. But I am trying to get it to loop through 3 pictures wide, then loop again. and display them, I am going to add pagination to the script, but before i do that i need it to loop.
here is my script:

       include ("lock.php");

        $my_que[0] = mysqli_query($bd,"SELECT * FROM `products`");

            for( $i = 0; $i < mysqli_num_rows( $my_que[0] ); $i++ )
                {
                    $row = mysqli_fetch_array( $my_que[0] );
            print '<div><img width="200" height="200" src="'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'];.'admin/'. $row['path'] . '" / class="img-rounded">'.$row['description'].'</div><br>';

            }

[rproffitt]

I need some clarification here. PHP is usually server side so to loop images you usually have some HTML and JavaScript to display this on the web browser. That is, it would be odd to do this all in PHP.

[patk570]

So basically, i want it to do :

123
456
789

I have the css that has it loop them all, but it fills the page, I want it to be like the above when it runs the loop.

[rproffitt]

Since you didn't reveal all the code, then my reply will be just about as incomplete.
On the client side keep track of which set and request the next when you feel like it.
That is, this is not something I would have in PHP but in the complete design.

[diafol]

This isn't as straightforward as it sounds. This is the reason that there are a number of ready-made sliders in existence. For a minimal PHP code, pass all image urls to javascript, and let the slider deal with it.

You could use mysqli (or PDO) and fetch data as an array of image urls, json_encode it and pass it directly to a javascript variable (or slider object property):

var imgs = <?=$imgJSON?>;

[patk570]

its not for a slider, it's to show all the images on the screen, but have them as the format described. I can put them in a table format IE:

<?php 
<table>

echo '<tr><td>Img 1</td><td>Img 2</td><td>Img 3</td></tr>';
LOOP 
to the next row...
ETC.. till all results in the DB are done.  

</table>

[rproffitt]

That's still a portion of the code. As noted, move your rotation code over to the client in JavaScript and pull/change as you wish.

In a later reply you change your requirement to show all the images on the screen. That's a different requirement and you code as you wish.

[diafol]

Is there a reason for a table? Tables aren.t the best for displaying images.

[patk570]

this is what i was trying to acheive. I found a solution and adapted it.

    include ("lock.php");
// Select the data from table_name
$result = mysqli_query($bd,"SELECT * FROM products");

// Display the table
echo "<table class=\"table table-bordered\">";

// Put results into table
$counter = 0;
while($row = mysqli_fetch_array($result))
{

// Display the image
echo "<td align='left'><a href=\"" .$row['path'] . "\">

<span class='producttable'><img width='140' src=\"" . $row['path'] . "\" border=1 alt=\"" . $row["path"] . "\" title=\"" . $row["price"] . "\"></span>

<br>
<span class='producttext'>$row[product_name]</span></br><br>$row[description]

</br>

</span></a>";
echo "<br><span class='producttext'><strong>&pound;$row[search_price]</strong></span></br>";

$counter++; # increment count every iteration
if ( $counter % 3 == 0 )
{
echo "<tr />";
}
}
echo "</td>";
echo "</table>";

[diafol]

So you.re using bootstrap? BS4 is out in alpha but tests pretty well. It uses "cards" to achieve this sort of thing. A nicer option with regard to responsive IMO.

[diafol]

Further to my suggestion: http://www.bootply.com/M9XFCRkbtO

Just playing... - there's loads you could do with that though.

[patk570]

That's not a bad idea, but I still had to have it draw from a database and display it 3 wide. That's where I needed the code came from. I do however like it. The site I am using is not actually bootstrap, however. I changed templates. They are still repsonsive, but not bootstrap responsive.