displaying images from mysql in php in rows and cols - php

Question

i need to display images from mysql in my gallery. i have a responsive template. i have around 40 images in my mysql i want to fetch images and display it in gallery view of 4 column per row and it should go to the next set
here is my code for the html gallery
<ul class="row box2">
<li class="span4">
<img></img>
</li>
<li class="span4">
<img></img>
</li>
<li class="span4">
<img></img>
</li>
<li class="span4">
<img></img>
</li>
</ul>
so above is my code i need to repeat this code for every 4 image i show from Mysql using php so that i can form a gallery
pls help in looping this for every four image fetched so that i disaplay all my 40 images in 10 rows 4 per column
thanks in advance

Answer 1

You can do it like this
$i=0;
while = ($row = mysql_fetch_row($resource)){
if($i==0){
?><ul class="row box2"><?php
}
?>
<li class="span4"><img src='<?php echo $row['image']?>'></img></li>
<?php
$i++;
if($i==4){
?></ul><?php
$i=0;
}
}

Answer 2

Use array_chunk to devide you main Array with all images into small array with 4 images
as example:
$mainArray;// here the value of all images from db
$resultArray = array_chunk($mainArray, 4); //now you have arrays which include 4 images
And then use foreach to build block as you want
<?php foreach ($resultArray as $minArray){ ?>
<ul class="row box2">
<?php foreach ($minArray as $array){ ?>
<li class="span4">
<img><?php echo $array['img']?></img>
</li>
<?php } ?>
</ul>
<?php } ?>

Answer 3

I am not sure if i understand your questing correctly but you can use for loops . Is this what you want?
var x;
var y = 1;
for (var i=0;i<10;i++)
{
x = x + '<ul class="row box' + i + '">
<li class="span4">
<img> '+ imageArray[y] +' </img>
</li>
<li class="span4">
<img> '+ (imageArray[y] +1) +'</img>
</li>
<li class="span4">
<img>'+ (imageArray[y] + 2) +' </img>
</li>
<li class="span4">
<img>'+ (imageArray[y] + 3) +'</img>
</li>
</ul>';
y++;
}