0

問題

行ごとに 3 つの「ブロック」を表示し、大きい画像と小さい画像を交互に表示するギャラリーを生成しようとしています。

例えば：

Big     |   4 Small     |   Big

4 Small |   Big         |   4 Small

1 つの大きな画像は、4 つの小さな画像のサイズです。

私が試したこと

これまでに試したことの例を次に示します。

            $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;

最初の行は正常に表示されますが、次の行は完全に台無しになります。これが機能するために見逃したものを見ることができません。

「行」のクラスは、レスポンシブにするために、Zurb による基盤フレームワーク上にこれを構築しているためです。

4

3 に答える 3

2

$r問題は、2 番目の行では、4 つの小さな画像の終わりまでインクリメントしないため、各小さな画像の前1に追加し続けることです。偶数行のブロック<div class="row">を変更する必要があります。ifこれを行うには、現在の行を追跡するカウンターをもう 1 つ追加します。

追加することで

$t=0;

変化する

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

に

//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">'; }
}

あなたは今持っています-

$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;

http://phpfiddle.org/main/code/t25-kbeで phpFiddle の例を見ることができます。これは 60 枚の画像なので、合計 4 行、各パターンに 2 行あります。

于 2013-07-18T16:15:53.173 に答える