Question

我想创建一个带有网格视图（Facebook样式）的照片库，我想知道这是否仅适用于rails或者是否应该使用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

我就这样做了......

我使用Paperclip来调整图像缩略图的大小，在这种情况下，小尺寸是128x128，以及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>

我的app / assets / stylesheets 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;
  }

图像/照片库（网格视图）与铁轨？

2 个答案: