使用Twitter Bootstrap構建ScreenShot Gallery

我目前正在嘗試構建截圖庫。我已經完成了第一步，使用戶可以將圖像上傳到mysql數據庫。使用Twitter Bootstrap構建ScreenShot Gallery

這就是圖庫的圖像被提供給圖庫腳本的方式。不幸的是，我花了幾個月的時間完善了將各種各樣的東西放到數據庫中的能力，但沒有太多時間將它們從數據庫中取出並以用戶友好的格式顯示。

Twitter的引導流體網格系統
Twitter的引導利用流體網格系統來顯示數據。你不必使用它，但它使得外觀佈局更好。現在屏幕截圖庫需要顯示圖像行，並且每行都是4列寬。這裏是踢球者，這是每一排的結構。

http://pastebin.com/HvBK5rTC

我需要一遍又一遍地產生該行。但我需要填充它的圖像在4停止，回顯合適的關閉div，回顯另一行的打開div，以及回顯四個更多圖像等等。

我沒有任何代碼，因爲我不知道從哪裏開始。如果你能幫助我開始，我可以提供任何你需要的東西。

編輯這就是我來了這麼遠，但我不知道如何關閉<div class="row-fluid">並打開一個新的。

http://pastebin.com/EADji2eh

來源

2013-07-13 David Stokes Douglas

你幾乎在那裏。 mysql_* fn's已被棄用，您應該使用PDO等。

您可以通過爲流量控制添加一個外部循環，並使用您已經作爲內部的內容來執行所需操作。結果陣列，它會自動通過結果爲您設置迭代，而無需跟蹤偏移的限制等

build_gallery_fn.php：

function image_from_database() { 
      // use a running counter for flow control of the outer loop 
     $runningcount = 0; 

     $r = mysql_query("SELECT DISTINCT logo AS `img` FROM NewsArticles WHERE logo IS NOT NULL AND logo !='';"); 

      //Get # of images in results to use as upper limit for outer loop 
     $img_ct = mysql_num_rows($r); 

     while ($runningcount <= $img_ct){ 

        //rowcount reset to break content blocks 
      $rowcount = 0; 


      echo "<div class=\"row-fluid\">"; 

      $runningcount++; 

        while(($rowcount <= 3) && $row = mysql_fetch_assoc($r)) 
      { 
        $rowcount++; 
        $img = $row['img']; 
        echo '<div class="span2">'; 
        echo "<span class='thumbnail'><img src='attachments/logos/$img'/> Photo # $runningcount of $img_ct</span>"; 
        echo '</div>'; 
      } 
      echo "</div>"; 

     } 
}

輸出持有人：

<div class="container"> 
    <h1 class="text-center">The American Pacific Group ScreenShot Gallery</h1> 
    <hr> 

      <?php 
        echo image_from_database(); 
      ?> 

</div>

來源

2013-07-13 22:09:00 cerd

使用Twitter Bootstrap構建ScreenShot Gallery

回答

相關問題