データベースからのイメージをブートストラップで表示する方法サムネイル3列ビュー？

Question

これは私のコードであると私は、ブートストラップ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

は、3列のサムネイル画像ギャラリーとブートストラップ使用したバージョンです。各画像のサイズは150x150です。この例では、image、title、およびdescription（おそらくプライマリ・キーID列）の3つのデータベース列が必要です。 mysqli拡張を使用し、mysqlから離れていることを強く推奨します。 PDOを使用して、廃止予定のコードやSQLインジェクションなどから保護してください。

• 「画像」は、このような「chickens.jpg」
• 「タイトル」として.jpgファイルの実際の名前は、IMGのALT属性に画像の名前が含まれてい
• 「説明は」Aが含ま含ま画像の説明は、

この例のコードは未検証である

<?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(); 
    } 
} 
?> 

Answer 2

<div class="row"> 
    <?php 
    $query=mysql_query("select * from tbl_gallery")or die(mysql_error()); 
    while($row = mysql_fetch_array($query)) 
    { 
     $id=$row['Photo_ID']; 
    ?> 
     <div class="col-md-4"> 
      <a href="adminln/<?php echo $row['Photo']; ?>" class="thumbnail"> 
      <img src="adminln/<?php echo $row['Photo']; ?>"alt="..." class="img-rounded img-responsive"> 
     </a> 
     </div> 
    <?php } ?> 
</div>