Issues with PHP/MySQL loop

Question

I'm working on a loop within a grid system that displays 2 grid rows of 3 inline images at a time (pagination). I've been trying to debug my code to display <div id="clear"></div> after every 3 returned MySQL rows, but haven't been successful.

PHP/HTML

<ul class="clean" style="width:940px; height:465px;">
  <?php
  $result = mysql_query("SELECT * FROM images");
  $i=0;
  //Begin image loop
  while($row = mysql_fetch_array($result)){
  //Start counter
  $i++;
  $n = ($i + 5);
  $class = "";
  $clear = "";

  //Generate classes 
  if (($i % 3) == 1){
      $class = "alpha";
  }
  if (($i % 3) == 0){
      $class = "omega";
  }

  //Generate list items
  if (($n % 6) == 0){?>

  <li class="clearfix"> 
    <?php }if (($i % 4) == 0){?>
    <div id="clear"></div>
    <?php }?>
    <div class="grid_4 <?php echo $class;?>">
      <p><a href="<?php echo $row["src"];?>" alt="<?php echo $row["alt"];?>">
      <img src="<?php echo $row["src"];?>" alt="<?php echo $row["alt"];?>" />
      </a><br />
      <small class="center"><?php echo $row["excerpt"];?></small></p>
    </div>
    <?php if (($i % 6) == 0){?>
  </li> 
  <!-- //slide --> 
  <?php }} //End image loop?>
</ul>

How I have my grid set up is, within each grid row from left to right, there is an alpha class assigned to the first element and an omega class assigned to the last. In order to display <div id="clear"></div> after every 3 returned MySQL rows technically, this should work:

Generated list items

<?php 
if (($n % 6) == 0){?>

<li class="clearfix"> 
<?php }if (($i % 4) == 0){?>
  <div id="clear"></div>
<?php }?> 

However it doesn't. Within 6 returned grid rows equaling 18 total images, it generates <div id="clear"></div> fine after MySQL rows 1-3 and after 13-15, but for MySQL rows 6-9,<div id="clear"></div> displays after MySQL row 6 where it should be displaying after 9.

I hope this makes sense, any suggestions would be greatly appreciated.

Answer 1

See if something like this would work for you.

<?php
$i = 1;
$result = mysql_query("SELECT * FROM images");

$max_count = mysql_num_rows($result);

if($max_count > 0)
{
?>
<ul>
<?php
while($row = mysql_fetch_array($result)) {
    if($i % 3 == 1) {
        $class = 'alpha';
    } elseif($i % 3 == 0) {
        $class = 'omega';
    } else {
        $class = ''; //Do NOT carry through the loops
    }

    if($i % 6 == 1 || $i == 1) {
?>
    <li>
<?php
    }
?>
        <div class="grid_4 <?php echo $class ?>">
            <p>
                <a href="<?php echo $row["src"];?>" alt="<?php echo $row["alt"];?>"><img src="<?php echo $row["src"];?>" alt="<?php echo $row["alt"];?>" /></a>
                <br />
                <small class="center"><?php echo $row["excerpt"];?></small>
            </p>
        </div>
<?php
    if($i % 3 == 0) {
?>
        <div class='clear'>&nbsp;</div>
<?php
    }

    if($i % 6 == 0 || $i == $max_count) {
?>
    </li>
<?php
    }

    $i++; //Move Row Count Along
}
?>
</ul>
<?php
}
?>

Answer 2

Okay, so I think it has to do with your if (($i % 4) == 0) statement. You should use modulus by 3, not by 4. This will give your a <div id="clear"></div> on the first row though.

In order to prevent that, you can say:

if ((($i % 3) == 0) && $i != 0)

Give it a try, let me know if it works for you!