在HTML中从DB获取的图像的库视图

时间:2015-04-14 16:11:55

标签: javascript php jquery html

我的列表中有近200张图片。

$rings = $db->query("SELECT * FROM rings WHERE id > ". $ringId ." LIMIT 100"); 

我希望将它们显示在一个带有复选框的Gallery表单中。每行必须包含至少4张图像及其复选框。

我试过,在添加div的情况下制作一个for循环但是一次只能在Ring上垂直添加。我怎么能给它一些画廊外观。

<div>

                                    <?php
                                            echo "<table><tr>";
                                            $i =0;
                                            foreach( $rings as $ring )
                                            {
                                               $i++;
                                               echo '<td><input type="image" src="http://thevowapp.com/iphoneapp/vowstore/rings/'.  $ring['imagePath'] .'" name="checked" value="' . $ring['id'].'" data-my-info="'. $ring['ringSetName'] .'" style="width:280px; height:280px;"></td>';
                                               echo '<input type="checkbox">';
                                               if( $i % 3 == 0 )
                                               {
                                                 echo "</tr><tr>";
                                               }
                                             }
                                             echo "</tr></table>";
                                       ?>
                               </div>

2 个答案:

答案 0 :(得分:1)

您需要控制输出以使其水平输出,直到该行中有4个图像,然后开始新行。

另外,我可以为此建议一个表格结构。

echo "<table>
       <tr>";
$i=0;
foreach( $rings as $ring ):
  $i++
  echo "<td><img src='{$ring['thumb']}' /></td>";
  if( $i % 4 == 0 ){
    echo "</tr><tr>";
  }
}
echo "</tr></table>";

答案 1 :(得分:0)

考虑在每个循环中递增变量,例如:

<?php
    $loop = 0;
    foreach ($items as $item) {
        $loop++;
        ?>
        <div class="col-md-3"><!-- My content --></div>
        <?php
        if ($loop == 4) {
            $loop = 0;
        ?>
            <div class="clearfix"></div>
        <?php
        }
    }