Question

问题

我试图生成一个展示3＆＃34;块＆＃34;每行和大图像和小图像之间的交替。

例如：

Big     |   4 Small     |   Big

4 Small |   Big         |   4 Small

一张大图像是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;

第一行显示正常，但下一行完全混乱。我无法看到我为此而错过的东西。

＆＃34; row＆＃34;是因为我在Zurb的基础框架上构建了这个，以使其具有响应性。

Answer 1

问题在于，在第2行，您不会将$r增加到1直到4小的结尾，所以它会在每个之前继续添加<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行。

Answer 2

新答案：

好的，这就是你想要的：

<style type="text/css">
.big {
    width:200px;
    height:200px;
    background:#03F;    
}
.small {
    width:50px;
    height:50px;
    background:#F00;    
}
</style>

<?

$gallery_images = array(
 1,2,3,4,5,6
);          
        echo '<div class="row">';
        //count counts whether it's big or small
        $count = 0;
        //count2 counts whether it's the end of the row or not
        $count2 = 0; 
        $row   = 0;
        foreach($gallery_images as $image_data) {
            //assign these from image data
            $big = "<img class='big'>"; 
            $small =  array(
                "<img class='small'>","<img class='small'>","<img class='small'>","<img class='small'>"
            );
            //if it's 0 it's big else it's 1 and it's small 
            if($count === 0) {
                echo $big;
                $count++; 
            }else {
                foreach($small as $s) {
                    echo $s;    
                }; 
                $count = 0; 
            }
                            //if it's 2 then its the end of the row else increment
            if($count2 === 2) {
                echo "</div>";
                echo "<div class='row'>";   
                $count2 = 0;
            }else {
                $count2 ++;
            }   


        }


?>

Answer 3

新：

好的，你需要修补它，但我认为它解决了这个问题：

<style type="text/css">
.big {
    width:200px;
    height:200px;
    background:#03F;    
}
.small {
width:50px;
height:50px;
    background:#F00;    
}
</style>

<?
        $gallery_images = array(
         1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16
        );           
        //find out how many images
        $total_images = count($gallery_images); 

        echo '<div class="row">';
        //count counts whether it's big or small
        $count = 0;
        //count2 counts whether it's the end of the row or not
        $count2 = 0; 
        $row   = 0;
        //overall count of images 
        $overall = 0;
        for($i=0;$i<count($gallery_images);$i++) {
            //assign these from image data
            $big = "<img class='big' src='".$gallery_images[$i]."'>"; 
            //increment overall
            $overall++;
            if($i+1 < $total_images) {
                $small1 = $i+1;
                $small[] = $small1; //would be $gallery_images[$small1]
                $overall++;
            }
            if($i+1 < $total_images) {
                $small2 = $i+2;
                $small[] = $small2;  //would be $gallery_images[$small2]
                $overall++;
            }
            if($i+1 < $total_images) {
                $small3 = $i+3;
                $small[] = $small3; //would be $gallery_images[$small3]
                $overall++;
            }
            if($i+1 < $total_images) {
                $small4 = $i+4;
                $small[] = $small4; //would be $gallery_images[$small4]
                $overall++;
            }
            //if it's 0 it's big else it's 1 and it's small 
            if($count === 0) {
                if($overall < $total_images) {
                    echo $big;
                    $count++; 
                }
            }else {
                if($small) {
                    foreach($small as $s) {
                        echo "<img class='small' src='".$s."' />";
                    }; 
                    $count = 0; 
                }
            }
            if($count2 === 2) {
                echo "</div>";
                echo "<div class='row'>";   
                $count2 = 0;
            }else {
                $count2 ++;
            }   
            unset($small);
            if($overall >= $total_images) {
                echo "</div>";  
            }
        }


?>

生成图库循环

3 个答案: