生成图库循环

Question

The Problem

I'm attempting to generate a gallery where it will display 3 "blocks" per row and alternate between large and small images.

For example:

Big     |   4 Small     |   Big

4 Small |   Big         |   4 Small

One big image is the size of 4 small images.

What I've Tried

Here's an example of what I've tried so far.

            $i = 0;
            $r = 0;
            $image = '';
            foreach($gallery_images as $image_data) {

                ($i == 5 ? $i = 0 : '');

                //If there's been 3 blocks added to the row, end the row and start a new one
                if($r == 3) { $image .= '</div>'; $r = 0; }

                //Start new row every 3 blocks
                if($r == 0) { $image .= '<div class="row">'; }

                //One big image, per 4 small in sequence
                if($i == 0) {
                    $image .= '<div style="height: 300px; width:33.3%; background: red;float:left;"></div>';
                    ++$r;
                } else {
                    //If no small, start the block
                    if($i == 1) { $image .= '<div style="width:33.3%;height:300px;float:left;">'; }
                        //echo each small image
                        $image .= '<div style="height: 150px; width:50%;background: blue;float:left;"></div>';

                    //Once 4 images have been echoed, close the div
                    if($i == 4) { $image .= '</div>'; ++$r; }
                }

                ++$i;

            }
            echo $image;

The first row displays fine, but then the next row messes up completely. I just can't see what I've missed in order for this to work.

The class of "row" is because I'm building this upon the foundation framework by Zurb in order to make it responsive.

Answer 1

The issue is that on the 2nd row(s), you do not increment $r to 1 until the end of the 4 small, so it continues to add <div class="row"> before each small image. You need to change your if block on the even rows. You can do this by adding 1 more counter, that keeps track of what row you are on -

by adding

$t=0;

and changing

//Start new row every 3 blocks
if($r == 0) { $image .= '<div class="row">'; }

to

//Start new row every 3 blocks
if($t%2==1){ // if we are on an even row
    if($i == 1 && $r == 0) { $image .= '<div class="row">';}
}
else{ // if we are on an odd row
    if($r == 0) { $image .= '<div class="row">'; }
}

you now have-

$i = 0;
$r = 0;
$image = '';
$t=0; // counter for odd/even row
foreach($gallery_images as $image_data) {

         ($i == 5 ? $i = 0 : '');
            //If there's been 3 blocks added to the row, end the row and start a new one
            if($r == 3) { $image .= '</div>'; $r = 0; ++$t; }

          //Start new row every 3 blocks
          if($t%2==1){ // if we are on an even row
              if($i == 1 && $r == 0) { $image .= '<div class="row">';} // if it is the first small image group start the row
          }
          else{ // if we are on an odd row
                 if($r == 0) { $image .= '<div class="row">'; }  // if it is the first large image
          }

            //One big image, per 4 small in sequence
            if($i == 0) {
                $image .= '<div style="height: 300px; width:33.3%; background: red;float:left;"></div>';
                ++$r;
            } else {
                //If no small, start the block
                if($i == 1) { $image .= '<div style="width:33.3%;height:300px;float:left;">'; }
                    //echo each small image
                    $image .= '<div style="height: 150px; width:50%;background: blue;float:left;"></div>';

                //Once 4 images have been echoed, close the div
                if($i == 4) { $image .= '</div>'; ++$r; }
            }

            ++$i;

        }
        echo $image;

you can see a phpFiddle example at http://phpfiddle.org/main/code/t25-kbe This is with 60 images, so there is 4 rows total, 2 of each pattern.