帶導軌的圖像/照片庫（網格視圖）？

Question

我想創建一個帶有網格視圖（Facebook風格）的照片庫，我想知道這是否只能使用軌道或者如果我應該使用jQuery來做到這一點。

我正在使用回形針，我卡住試圖顯示圖片作爲網格。

如果有人有教程鏈接或起點，我會很高興。 （我已經我的索引視圖中顯示所有照片）

index.html.erb

<% title "All Photos" %> 

<table> 
    <% for photo in @photos %> 
    <tr> 
    <td><%= link_to image_tag(photo.image.url), photo %></td> 
     <td><%= link_to photo.name, photo %></td> 
    </tr> 
    <% end %> 
</table> 

謝謝！

Answer 1

這不依賴於Rails，因爲你要處理的只是你的HTML標記問題。

表格可能是對這個問題的錯誤解決方案 - 至少是你已經佈置的方式。表格行（<tr>）不能被設置爲以列的形式出現在彼此的旁邊。這裏常見的解決方案是使用浮動div來顯示您想要的任意數量的列中的內容。以下代碼與上面的代碼相同，但使用div除外：

<div id="gallery"> 
    <% for photo in @photos %> 
    <div class="photo"> 
     <%= link_to image_tag(photo.image.url), photo %> 
     <%= link_to photo.name, photo %> 
    </div> 
    <% end %> 
</div> 

然後，只需使用CSS，即可將圖像佈置爲網格。一個例子是這裏： http://www.alistapart.com/articles/practicalcss/

從那裏，你可以增強基本實現與JQuery或進一步的CSS品嚐。

Answer 2

這是我做到了......

我用回形針大小的圖像縮略圖，在這種情況下，小規模是128×128，與CSSBakery的偉大後沿。我也有圖像設置有一個鏈接到原始圖像。

http://www.cssbakery.com/2010/07/image-grid-using-css-floats_6950.html https://github.com/thoughtbot/paperclip

筆者認爲：

<div id="gallery"> 
    <ul id="grid"> 
    <% @images.each do |image| %> 
    <li><%= link_to image_tag(image.photo.url(:tiny)), image %></li> 
    <% end %> 
    </ul> 
</div> 

林我的應用程序/資產/ CSS樣式表文件（閱讀的CSS電網www.cssbakery.com後）

/* ------------------------------------------ 
     Grid 
--------------------------------------------- */ 

ul#grid { 
    padding: 0; 
    list-style: none; 
    margin: 20px auto 0; 
    width: 700px; 
    } 

#grid li { 
    float: left; 
    padding: 0; 
    margin: 0 5px 10px 5px; 
    } 

#grid li a { 
    display: block; 
    } 

#grid li img { 
    background-color: #64666a; 
    padding: 7px; margin: 0; 
    border: 1px dotted #58595b; 
    width: 128px; 
    height: 128px; 
    } 

#grid li a:hover img { 
opacity:0.3; filter:alpha(opacity=30); 
    } 

.grid_display { 
    padding: 20px; 
    margin-left: auto; margin-right: auto; margin-top:50px; margin-bottom:0; 
    /*background-color: #ffd7ce;*/ 
    width: 513px; 

    /*these two properties will be inherited by .grid_display h2 and .grid_display p */ 
    font-family: 'GraublauWeb', arial, serif; 
    text-align: center; 
    } 

div.grid_display h2 { 
    padding: 0; margin: 0; 
    clear: both; 
    font-size: 35px; 
    font-weight: normal; 
    color: #58595b; 
    background: none; 
    font-family: 'GraublauWeb', arial, serif; 

    /* reset for cascade effects that are trickling down from other h2's */ 
    text-transform: none; 
    letter-spacing: normal; 
    } 

.grid_display p { 
    margin:0; padding: 0; 
    font-size: 15px; 
    color: #58595b; 
    }