Looping inside a while loop mysqli_fetch_array()

Question

I have the below working code to fetch images from database mysqli_fetch_array() and load the images into layout grid structure in Jquery Mobile 1.2.0.

The layout grid structure of Jquery Mobile uses built-in styled grid/blocks limited to five columns, ui-block-a up to ui-block-e. Hence, I am ought to stick to JQM styles.

NOTE: I am using four columns structure, ui-block-a to ui-block-d

In order to load eight (8) images into the blocks and have them styled correctly, I have to use these classes ui-block-a, -b, -c, -d for the first row of four images and the same classes for the second row of four images.

I used foreach (array(a, b, c, d, a, b, c, d) as $i) inside the while loop but I got duplicated results.

The code is working fine, but I was wondering if there are other possibilities to achieve the desired structure by removing all IF-statements.

The code:

while ($row = mysqli_fetch_array($query)) {
 $img = $row["fn"];
  if (empty($img)) { break; }
  $thumb = 'images/th_'.$img;
  if ($count == 8) { break; } // limited to 8 images/results

  if ($count == 0) $i = 'a'; //first 4 imgs row classes
  if ($count == 1) $i = 'b';
  if ($count == 2) $i = 'c';
  if ($count == 3) $i = 'd';

  if ($count == 4) $i = 'a'; //second 4 imgs row classes
  if ($count == 5) $i = 'b';
  if ($count == 6) $i = 'c';
  if ($count == 7) $i = 'd';

  $ths.='<div class="ui-block-'.$i.'"><img src="'.$thumb.'"></div>';

  $count = $count + 1;
};

The result:

<div class="ui-grid-c">
    <!-- First row -->
    <div class="ui-block-a"><img src="img1.jpg"></div>
    <div class="ui-block-b"><img src="img2.jpg"></div>
    <div class="ui-block-c"><img src="img3.jpg"></div>
    <div class="ui-block-d"><img src="img4.jpg"></div>
    <!-- Second row -->
    <div class="ui-block-a"><img src="img5.jpg"></div>
    <div class="ui-block-b"><img src="img6.jpg"></div>
    <div class="ui-block-c"><img src="img7.jpg"></div>
    <div class="ui-block-d"><img src="img8.jpg"></div>
</div>

Thank you in advance!

Hi may be late with my answer but wanted to say thanks for your JQM help! — KevInSol
– KevInSol, Commented Feb 28, 2013 at 15:11
I like it, I would use to generate dynamic photos gallery with swipe navigation ;) — Omar
– Omar, Commented Feb 28, 2013 at 15:14

Naryl · Accepted Answer · 2013-02-21 15:36:13Z

3

let's give it a try!

$count=0;
$arr=array('a', 'b', 'c', 'd');
while ($row = mysqli_fetch_array($query)) {
 $img = $row["fn"];
  if (empty($img)) { break; }
  $thumb = 'images/th_'.$img;
  if ($count == 8) { break; }

  $i=$arr[$count%4];    

  $ths.='<div class="ui-block-'.$i.'"><img src="'.$thumb.'"></div>';

  $count++;
};

edited Feb 21, 2013 at 15:36

answered Feb 21, 2013 at 15:03

Naryl

1,8881 gold badge10 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Marc B Over a year ago

forgot the 8 case/break, and quotes around the array elements. otherwise looks ok.

Omar Over a year ago

It is not going through the while loop. $count echo results 0.

njzk2 Over a year ago

i'd replace %4 with %count($arr) - and i don't think the < 8 is needed.

cernunnos · Accepted Answer · 2013-02-21 15:02:07Z

1

Try

$count = 0;
while ($row = mysqli_fetch_array($query) && $count < 8) {
  $img = $row["fn"];
  if (empty($img)) { break; }
  $thumb = 'images/th_'.$img;

  $i = chr(97 + ($count%4) ); // char a + 0, 1, 2 or 3

  $ths.='<div class="ui-block-'.$i.'"><img src="'.$thumb.'"></div>';

  $count++;
};

php function chr: http://php.net/manual/en/function.chr.php

ascii code for "a": 97

answered Feb 21, 2013 at 15:02

cernunnos

2,7961 gold badge21 silver badges18 bronze badges

3 Comments

Omar Over a year ago

Not working as well. It is not going through the while loop. $count echo results 0.

cernunnos Over a year ago

If it is not going though the loop then mysqli_fetch_array($query) is returning false, because when $count is 0 it is obviously < 8. Try executing the query on an SQL client to make sure its working and returns results.

Omar Over a year ago

I appreciate your valuable input. I got it fixed :)

KevInSol · Accepted Answer · 2013-02-28 16:57:45Z

Like the other answers this uses MOD to determine what column we are in, but will work for any number of pics and also fill in blank cells should num of pic not be a factor of 4. Used a user input instead of a d/b result for the demo see http://solomon.ie/so/gallery.php?pics=6 - change pics=6 to whatever number

<?  
$num_pics = 0;
$num_pics = $_GET['pics'];


// store HTML/JQM fragments
$blank_picture_row = "<div class='ui-block-a'>%pic_1%</div>\n";
$blank_picture_row .= "<div class='ui-block-b'>%pic_2%</div>\n";
$blank_picture_row .= "<div class='ui-block-c'>%pic_3%</div>\n";
$blank_picture_row .= "<div class='ui-block-d'>%pic_4%</div>\n\n";

//start HTML
$out ="<div class='ui-grid-c'>\n\n";



for ($pic_index=0; $pic_index < $num_pics; $pic_index++)
    {
    $thumb_pic = "Pic # $pic_index";// create image tag - text for demo

    if ($pic_index % 4 == 0) // mod result will be zero for start of each new row of 4 
        $picture_row = $blank_picture_row;

    $position_in_row = ($pic_index % 4) + 1;
    $pic_place_holder = "%pic_"  . $position_in_row . "%";

    $picture_row = str_replace($pic_place_holder, $thumb_pic, $picture_row);

    if ($pic_index == ($num_pics - 1)) // last pic, blank any positions that are not needed
        {
        $position_in_row = $pic_index % 4; 

        switch ($position_in_row) 
            { 
            case 0: // last pic was in column 1 - using a space, but could also put in a dummy pic
                    $picture_row = str_replace("%pic_2%", "&nbsp;", $picture_row);
            case 1: // last pic was in column 2 
                    $picture_row = str_replace("%pic_3%", "&nbsp;", $picture_row);
            case 2: // last pic was in column 3 
                    $picture_row = str_replace("%pic_4%", "&nbsp;", $picture_row);
            case 3: // last pic is in column 4, no action required
                break;
            } 
        } // END if if ($pic_index == ($num_pics - 1))




    if ($pic_index % 4 == 3 || $pic_index == ($num_pics - 1))  
        {// last pic in this row or last pic in total - add this row to output
        $out .= $picture_row;
        }

    } // END for ($pic_index=$start_pic; $pic_index < $finish_pic; $pic_index++)


$out .= "</div>\n\n\n";
$out=htmlspecialchars($out);
$out=nl2br($out);

print "$out\n";
?>

Collectives™ on Stack Overflow

Looping inside a while loop mysqli_fetch_array()

3 Answers 3

3 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related