php - 如何在 bootstrap 缩略图 3 列 View 中显示数据库中的图像？

Question

这是我的代码，我正在使用 bootstrap 3.x.x:

<div class="row ">
     <div class="col-xs-6">
              <h3>Gallery</h3>
          <?php
          $query=mysql_query("select * from tbl_gallery")or die(mysql_error());
          while($row=mysql_fetch_array($query))
          {
           $id=$row['Photo_ID'];
           ?>
           <a class="thumbnail" href="adminln/<?php echo $row['Photo']; ?>" > <img class="img-inline" src="adminln/<?php echo $row['Photo']; ?>" alt="http://placehold.it/700x400"/>
           </a>
           <?php } ?>
       </div>
   </div>

Answer 1

这是一个使用 Bootstrap 的版本，带有 3 列缩略图库。每个图像的大小为 150x150。在此示例中，您应该具有以下三个数据库列:图像、标题和描述(可能还有主键 ID 列)。强烈建议使用mysqli扩展，远离mysql；或者更好的是，使用 PDO 来防止已弃用的代码以及 SQL 注入(inject)等。

• “Image”包含 .jpg 文件的实际名称，例如“chickens.jpg”
• “标题”包含 IMG ALT 属性的图像名称
• “描述”包含图像的描述

此示例代码未经测试

<?php
// create new array
$thumbnails = array();
$query = mysql_query("select * from tbl_gallery")or die(mysql_error());
while($row = mysql_fetch_array($query))
{
    // add new record to array
    $thumbnails[] = $row;

    // check to see if array has 3 records in it
    if (count($thumbnails) === 3)
    {
        echo <<<EOT
            <div class="row">
                <div class="col-xs-12 col-sm-4">
                    <a href="adminln/$thumbnails[0]['image']" class="thumbnail">
                        <p>$thumbnails[0]['description']</p> 
                        <img src="adminln/$thumbnails[0]['image']" alt="$thumbnails[0]['title']" width="150" height="150">
                    </a>
                </div>
                <div class="col-xs-12 col-sm-4">
                    <a href="adminln/$thumbnails[1]['image']" class="thumbnail">
                        <p>$thumbnails[1]['description']</p>
                        <img src="adminln/$thumbnails[1]['image']" alt="$thumbnails[1]['title']" width="150" height="150">
                    </a>
                </div>
                <div class="col-xs-12 col-sm-4">
                    <a href="adminln/$thumbnails[2]['image']" class="thumbnail">
                        <p>$thumbnails[2]['description']</p> 
                        <img src="adminln/$thumbnails[2]['image']" alt="$thumbnails[2]['title']" width="150" height="150">
                    </a>
                </div>
            </div>
        EOT;

        // empty the array
        $thumbnails = array();
    }
}
?>